@salesforce/afv-skills 1.13.0 → 1.15.0

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

@@ -0,0 +1,107 @@
+name: "Tooltips"
+description: "Small overlay elements that provide brief, contextual information about UI elements when users hover or focus on them."
+category: "Overlay"
+slds_classes:
+  root: "slds-tooltip"
+  elements:
+    - class: "slds-tooltip__body"
+      description: "Content area of the tooltip"
+      purpose: "Contains the tooltip text or information"
+  modifiers:
+    - class: "slds-nubbin_top"
+      description: "Top-pointing nubbin"
+      usage: "When tooltip appears below the trigger"
+    - class: "slds-nubbin_bottom"
+      description: "Bottom-pointing nubbin"
+      usage: "When tooltip appears above the trigger"
+    - class: "slds-nubbin_left"
+      description: "Left-pointing nubbin"
+      usage: "When tooltip appears to the right of trigger"
+    - class: "slds-nubbin_right"
+      description: "Right-pointing nubbin"
+      usage: "When tooltip appears to the left of trigger"
+  states: []
+variants:
+  - name: "Base"
+    description: "Standard tooltip with informational content"
+    classes:
+      - "slds-tooltip"
+    usage_context: "Default tooltip for contextual help or information"
+    differences: "Small overlay with brief informational text"
+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 title attributes or custom components"
+accessibility:
+  keyboard_support:
+    - "Tooltip appears on focus of trigger element"
+    - "Tooltip disappears when focus leaves trigger"
+    - "No additional keyboard interactions required"
+  screen_reader:
+    - "Tooltip content announced when trigger receives focus"
+    - "Alternative text provided through aria-describedby"
+    - "Brief, informational content appropriately announced"
+  aria_attributes:
+    - "aria-describedby linking trigger to tooltip"
+    - "role='tooltip' for tooltip semantic"
+    - "id attribute for tooltip reference"
+usage_guidelines:
+  when_to_use:
+    - "For brief explanations of UI elements"
+    - "To provide additional context without cluttering interface"
+    - "For icon-only buttons or controls"
+    - "When space constraints limit inline help text"
+  when_not_to_use:
+    - "For critical information users must see"
+    - "For complex content or instructions"
+    - "On mobile devices where hover is unavailable"
+    - "For actionable content (use popovers instead)"
+  best_practices:
+    - "Keep tooltip text brief and informative"
+    - "Position tooltips to avoid blocking important content"
+    - "Use consistent timing for tooltip appearance"
+    - "Ensure tooltips are discoverable via keyboard"
+    - "Avoid tooltips on tooltips"
+  common_mistakes:
+    - "Making tooltip text too long or complex"
+    - "Using tooltips for critical information"
+    - "Poor positioning that blocks content"
+    - "Not providing keyboard access to tooltip content"
+code_examples:
+  - title: "Basic Tooltip"
+    code: |
+      <div class="slds-tooltip slds-nubbin_bottom" role="tooltip" id="help-tooltip">
+            <div class="slds-tooltip__body">This is helpful information about the element.</div>
+            </div>
+styling_hooks:
+  - name: "--slds-c-tooltip-color-background"
+    description: "Background color for tooltips"
+    category: "color"
+  - name: "--slds-c-tooltip-text-color"
+    description: "Text color for tooltips"
+    category: "color"
+dependencies:
+  css_files:
+    - "tooltip.css"
+    - "nubbins.css"
+  javascript:
+    - "tooltip.js"
+  icons: []
+  other_components: []
+related_components:
+  - name: "Popover"
+    relationship: "similar"
+    description: "Similar overlay for more complex content"
+  - name: "Help Text"
+    relationship: "alternative"
+    description: "Alternative for persistent contextual help"
+  - name: "Icons"
+    relationship: "depends-on"
+    description: "Often used to provide tooltips for icon meanings"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/tooltips/"
+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/tree-grid.yaml

@@ -0,0 +1,116 @@
+name: Tree Grid
+description: A data table component that combines hierarchical tree structure with tabular data display, allowing expansion
+  and collapse of nested data rows.
+category: Data
+slds_classes:
+  root: slds-tree_container
+  elements:
+  - class: slds-tree__item
+    description: Individual tree grid row
+    purpose: Represents a single data item with potential children
+  modifiers: []
+  states:
+  - class: slds-is-expanded
+    description: Expanded tree node state
+    trigger: When tree node children are visible
+  - class: slds-is-collapsed
+    description: Collapsed tree node state
+    trigger: When tree node children are hidden
+  - class: slds-is-selected
+    description: Selected tree node state
+    trigger: When tree node is selected
+variants:
+- name: Base
+  description: Standard tree grid with hierarchical data
+  classes:
+  - slds-tree_container
+  usage_context: Default tree grid for hierarchical tabular data
+  differences: Data table with expandable/collapsible hierarchical rows
+lightning_component:
+  name: lightning-tree-grid
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-tree-grid
+  mapping_notes: Direct mapping - Lightning component implements SLDS tree grid blueprint
+accessibility:
+  keyboard_support:
+  - Tab navigation through table cells and controls
+  - Arrow keys for cell and row navigation
+  - Enter/Space to toggle expansion
+  - Right arrow to expand collapsed nodes
+  - Left arrow to collapse expanded nodes
+  screen_reader:
+  - Table structure with row and column headers announced
+  - Hierarchical relationships communicated
+  - Expansion state changes announced
+  - Selection changes communicated
+  aria_attributes:
+  - role='treegrid' for tree grid container
+  - role='row' for table rows
+  - role='gridcell' for individual cells
+  - aria-expanded for expandable rows
+  - aria-selected for selectable rows
+  - aria-level for hierarchy depth
+usage_guidelines:
+  when_to_use:
+  - For hierarchical data that needs tabular presentation
+  - When users need to see relationships and data together
+  - For nested data structures with multiple attributes
+  - When expansion/collapse functionality improves usability
+  when_not_to_use:
+  - For flat data (use regular data table instead)
+  - When hierarchy is not meaningful to users
+  - For simple tree navigation (use tree component)
+  best_practices:
+  - Use clear visual indicators for hierarchy levels
+  - Provide consistent expand/collapse behavior
+  - Show loading states for dynamically loaded children
+  - Maintain good column alignment across hierarchy levels
+  - Support keyboard navigation throughout
+  common_mistakes:
+  - Poor visual hierarchy indication
+  - Inconsistent column alignment in nested rows
+  - Missing keyboard navigation support
+  - Unclear expansion/collapse controls
+code_examples:
+- title: Basic Tree Grid
+  code: "<div class=\"slds-tree_container\">\n      <table class=\"\" role=\"treegrid\" aria-label=\"Hierarchical data\">\n\
+    \        <thead>\n          <tr>\n            <th scope=\"col\">Name</th>\n            <th scope=\"col\">Type</th>\n \
+    \           <th scope=\"col\">Size</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr role=\"row\"\
+    \ aria-level=\"1\" aria-expanded=\"true\" tabindex=\"0\">\n            <td role=\"gridcell\" class=\"\">\n           \
+    \   <button class=\"slds-button slds-button_icon slds-button_icon-x-small\">\n                <svg class=\"slds-button__icon\"\
+    \ aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#chevronright\"\
+    ></use>\n                </svg>\n              </button>\n              Documents\n            </td>\n            <td\
+    \ role=\"gridcell\">Folder</td>\n            <td role=\"gridcell\">--</td>\n          </tr>\n          <tr role=\"row\"\
+    \ aria-level=\"2\" tabindex=\"0\">\n            <td role=\"gridcell\" style=\"padding-left: 2rem;\">\n              Report.pdf\n\
+    \            </td>\n            <td role=\"gridcell\">PDF</td>\n            <td role=\"gridcell\">1.2 MB</td>\n      \
+    \    </tr>\n        </tbody>\n      </table>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - tree-grid.css
+  - tree.css
+  - table.css
+  javascript:
+  - tree-grid.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - tree
+  - data-tables
+  - button-icon
+related_components:
+- name: Data Tables
+  relationship: parent
+  description: Base table functionality with tree hierarchy added
+- name: Tree
+  relationship: similar
+  description: Similar hierarchical structure without tabular data
+- name: Accordion
+  relationship: similar
+  description: Similar expand/collapse concept for content sections
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/tree-grid/
+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/trees.yaml

@@ -0,0 +1,116 @@
+name: Trees
+description: A hierarchical navigation component that displays data in a tree structure with expandable and collapsible nodes,
+  ideal for representing nested relationships.
+category: Navigation
+slds_classes:
+  root: slds-tree
+  elements:
+  - class: slds-tree__item
+    description: Individual tree node wrapper
+    purpose: Contains a single tree item and its children
+  - class: slds-tree__item-label
+    description: Label content for tree item
+    purpose: Contains the text or content for the tree node
+  modifiers: []
+  states:
+  - class: slds-is-expanded
+    description: Expanded tree node state
+    trigger: When node children are visible
+  - class: slds-is-collapsed
+    description: Collapsed tree node state
+    trigger: When node children are hidden
+  - class: slds-is-selected
+    description: Selected tree node state
+    trigger: When node is currently selected
+variants:
+- name: Base
+  description: Standard tree with expandable nodes
+  classes:
+  - slds-tree
+  usage_context: Default tree implementation for hierarchical data
+  differences: Hierarchical structure with expand/collapse functionality
+lightning_component:
+  name: lightning-tree
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-tree
+  mapping_notes: Direct mapping - Lightning component implements SLDS tree blueprint
+accessibility:
+  keyboard_support:
+  - Tab to focus the tree
+  - Arrow keys to navigate between nodes
+  - Enter/Space to select nodes
+  - Right arrow to expand collapsed nodes
+  - Left arrow to collapse expanded nodes
+  screen_reader:
+  - Tree structure and hierarchy announced
+  - Node states (expanded/collapsed) communicated
+  - Selection changes announced
+  - Node relationships described
+  aria_attributes:
+  - role='tree' for tree container
+  - role='treeitem' for individual nodes
+  - aria-expanded for expandable nodes
+  - aria-selected for selectable nodes
+  - aria-level for node hierarchy depth
+  - aria-setsize and aria-posinset for node position
+usage_guidelines:
+  when_to_use:
+  - For hierarchical data with parent-child relationships
+  - When users need to navigate nested structures
+  - For file system or folder-like interfaces
+  - To show organizational hierarchies
+  when_not_to_use:
+  - For flat lists (use regular lists instead)
+  - When hierarchy is not meaningful to users
+  - For simple navigation (use regular navigation components)
+  best_practices:
+  - Use clear visual indicators for expand/collapse states
+  - Provide meaningful node labels
+  - Show loading states for dynamically loaded children
+  - Allow keyboard navigation throughout the tree
+  - Indicate selection clearly
+  common_mistakes:
+  - Poor visual hierarchy indication
+  - Inconsistent expand/collapse behavior
+  - Missing keyboard navigation support
+  - Unclear node selection feedback
+code_examples:
+- title: Basic Tree Structure
+  code: "<div class=\"slds-tree_container\">\n      <ul role=\"tree\" class=\"slds-tree\">\n        <li role=\"treeitem\"\
+    \ aria-level=\"1\" aria-expanded=\"true\" aria-selected=\"false\" tabindex=\"0\">\n          <div class=\"slds-tree__item\"\
+    >\n            <button class=\"slds-button slds-button_icon slds-button_icon-x-small slds-m-right_x-small\" aria-hidden=\"\
+    true\" tabindex=\"-1\">\n              <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                <use xlink:href=\"\
+    /assets/icons/utility-sprite/svg/symbols.svg#chevronright\"></use>\n              </svg>\n            </button>\n    \
+    \        <span class=\"slds-tree__item-label\" title=\"Western Sales Director\">Western Sales Director</span>\n      \
+    \    </div>\n          <ul role=\"group\" class=\"\">\n            <li role=\"treeitem\" aria-level=\"2\" aria-selected=\"\
+    false\" tabindex=\"0\">\n              <div class=\"slds-tree__item\">\n                <span class=\"slds-tree__item-label\"\
+    \ title=\"Western Sales Manager\">Western Sales Manager</span>\n              </div>\n            </li>\n          </ul>\n\
+    \        </li>\n      </ul>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - tree.css
+  - button.css
+  javascript:
+  - tree.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - button-icon
+  - icons
+related_components:
+- name: Tree Grid
+  relationship: variant
+  description: Tree structure combined with data table functionality
+- name: Vertical Navigation
+  relationship: similar
+  description: Alternative navigation for hierarchical content
+- name: Accordion
+  relationship: similar
+  description: Alternative for collapsible hierarchical content
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/trees/
+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/trial-bar.yaml

@@ -0,0 +1,112 @@
+name: Trial Bar
+description: A persistent notification banner that informs users about trial status, subscription expiration, or upgrade opportunities,
+  typically displayed at the top of the interface.
+category: Feedback
+slds_classes:
+  root: slds-trial-header
+  elements: []
+  modifiers: []
+  states:
+  - class: slds-is-open
+    description: Visible trial bar state
+    trigger: Applied when trial bar is displayed
+  - class: slds-is-closed
+    description: Hidden trial bar state
+    trigger: Applied when trial bar is dismissed
+variants:
+- name: Base
+  description: Standard trial notification bar
+  classes:
+  - slds-trial-header
+  usage_context: Default implementation for trial notifications
+  differences: Basic informational styling for trial status
+- name: Warning
+  description: Warning trial bar for expiring trials
+  classes:
+  - slds-trial-header
+  usage_context: When trial is expiring soon
+  differences: Warning styling with urgency indicators
+- name: Expired
+  description: Expired trial notification
+  classes:
+  - slds-trial-header
+  usage_context: When trial has expired
+  differences: Error styling for expired trial state
+lightning_component:
+  name: No direct component
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component equivalent - typically implemented using custom components or lightning-notification
+accessibility:
+  keyboard_support:
+  - Tab navigation to action buttons
+  - Enter/Space to activate actions
+  - Escape to dismiss if dismissible
+  screen_reader:
+  - Trial status and urgency announced
+  - Action options clearly described
+  - Dismissal capability communicated
+  aria_attributes:
+  - role='banner' for trial notification
+  - aria-label describing trial status
+  - aria-live for dynamic updates
+  - aria-hidden when dismissed
+usage_guidelines:
+  when_to_use:
+  - For trial period notifications
+  - When subscription status needs attention
+  - For upgrade or renewal prompts
+  - To communicate time-sensitive offers
+  when_not_to_use:
+  - For general system notifications (use toast)
+  - For error messages (use alert)
+  - For one-time announcements
+  best_practices:
+  - Keep message concise and actionable
+  - Use appropriate urgency styling
+  - Provide clear call-to-action
+  - Allow dismissal when appropriate
+  - Update content based on trial status
+  common_mistakes:
+  - Overly aggressive or persistent notifications
+  - Unclear trial status or next steps
+  - Missing dismissal options
+  - Poor visual hierarchy
+code_examples:
+- title: Basic Trial Bar
+  description: Expired trial notification with limited access message
+  code: "<div class=\"slds-trial-header slds-is-open\" role=\"banner\" aria-label=\"Trial expired notification\">\n      <div\
+    \ class=\"\">\n        <div class=\"\">\n          <span class=\"\">\n            <svg class=\"slds-icon slds-icon_x-small\"\
+    \ aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#error\"></use>\n\
+    \            </svg>\n          </span>\n          <span class=\"slds-text-body_regular\">\n            <strong>Your trial\
+    \ has expired.</strong>\\ \n            You now have limited access. Subscribe to restore full functionality.\n      \
+    \    </span>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button slds-button_brand slds-button_small\"\
+    >\n            Subscribe Now\n          </button>\n        </div>\n      </div>\n      </div>\n"
+dependencies:
+  css_files:
+  - trial-header.css
+  - button.css
+  - notification.css
+  javascript:
+  - trial-header.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - button
+  - notification
+related_components:
+- name: Toast
+  relationship: alternative
+  description: Alternative for temporary notifications
+- name: Alert
+  relationship: similar
+  description: Similar notification concept
+- name: Global Header
+  relationship: container
+  description: Often positioned near global header
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/trial-bar/
+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/vertical-navigation.yaml

@@ -0,0 +1,130 @@
+name: "Vertical Navigation"
+description: "A navigation component that displays menu items in a vertical list, ideal for sidebar navigation and hierarchical menu structures."
+category: "Navigation"
+slds_classes:
+  root: "slds-nav-vertical"
+  elements:
+    - class: "slds-nav-vertical__section"
+      description: "Section container for grouped navigation items"
+      purpose: "Groups related navigation items with optional header"
+    - class: "slds-nav-vertical__title"
+      description: "Section title for navigation groups"
+      purpose: "Provides heading for navigation sections"
+    - class: "slds-nav-vertical__action"
+      description: "Individual navigation item"
+      purpose: "Clickable navigation link or button"
+    - class: "slds-nav-vertical__item"
+      description: "Navigation item wrapper"
+      purpose: "Contains navigation action and provides structure"
+  modifiers:
+    - class: "slds-nav-vertical_compact"
+      description: "Compact vertical navigation"
+      usage: "Reduced spacing for dense layouts"
+    - class: "slds-nav-vertical_shade"
+      description: "Shaded background navigation"
+      usage: "Enhanced visual separation with background"
+  states:
+    - class: "slds-is-active"
+      description: "Active navigation item state"
+      trigger: "Currently selected navigation item"
+    - class: "slds-has-focus"
+      description: "Focus state for navigation items"
+      trigger: "When navigation item has keyboard focus"
+variants:
+  - name: "Base"
+    description: "Standard vertical navigation list"
+    classes:
+      - "slds-nav-vertical"
+    usage_context: "Default vertical navigation for sidebars and menus"
+    differences: "Vertical list of navigation items with optional grouping"
+lightning_component:
+  name: "lightning-vertical-navigation"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-vertical-navigation"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS vertical navigation blueprint"
+accessibility:
+  keyboard_support:
+    - "Tab to focus navigation items"
+    - "Enter/Space to activate navigation items"
+    - "Arrow keys to navigate between items"
+    - "Home/End to go to first/last items"
+  screen_reader:
+    - "Navigation structure announced as list"
+    - "Section headings provide navigation context"
+    - "Current page or selection clearly identified"
+    - "Navigation purpose communicated"
+  aria_attributes:
+    - "role='navigation' for navigation container"
+    - "aria-label describing navigation purpose"
+    - "aria-current='page' for current page links"
+    - "role='list' for navigation item containers"
+    - "role='listitem' for navigation items"
+usage_guidelines:
+  when_to_use:
+    - "For sidebar navigation in applications"
+    - "To display hierarchical menu structures"
+    - "When vertical space is available"
+    - "For persistent navigation that doesn't change frequently"
+  when_not_to_use:
+    - "For horizontal navigation (use tabs or horizontal nav)"
+    - "When space is extremely limited"
+    - "For temporary or contextual actions (use menus instead)"
+  best_practices:
+    - "Use clear, descriptive navigation labels"
+    - "Group related navigation items logically"
+    - "Indicate current page or section clearly"
+    - "Maintain consistent navigation structure"
+    - "Provide visual hierarchy with appropriate spacing"
+  common_mistakes:
+    - "Poor grouping of navigation items"
+    - "Unclear or inconsistent labeling"
+    - "Not indicating current location"
+    - "Overloading with too many navigation options"
+code_examples:
+  - title: "Basic Vertical Navigation"
+    code: |
+      <nav class="slds-nav-vertical" aria-label="Main navigation">
+            <div class="slds-nav-vertical__section">
+              <h2 class="slds-nav-vertical__title">Section One</h2>
+              <ul>
+                <li class="slds-nav-vertical__item slds-is-active">
+                  <a href="#" class="slds-nav-vertical__action" aria-current="page">
+                    Current Page
+                  </a>
+                </li>
+                <li class="slds-nav-vertical__item">
+                  <a href="#" class="slds-nav-vertical__action">
+                    Navigation Item
+                  </a>
+                </li>
+                <li class="slds-nav-vertical__item">
+                  <a href="#" class="slds-nav-vertical__action">
+                    Another Item
+                  </a>
+                </li>
+              </ul>
+            </div>
+            </nav>
+styling_hooks: []
+dependencies:
+  css_files:
+    - "nav-vertical.css"
+  javascript: []
+  icons: []
+  other_components: []
+related_components:
+  - name: "Tabs"
+    relationship: "alternative"
+    description: "Alternative horizontal navigation for content switching"
+  - name: "Trees"
+    relationship: "similar"
+    description: "Similar hierarchical navigation with nesting"
+  - name: "Global Navigation"
+    relationship: "similar"
+    description: "Works together for complete navigation system"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/vertical-navigation/"
+metadata:
+  version: "1.0.0"
+  last_updated: "2025-11-12"
+  review_status: "complete"
+  notes: " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."