@salesforce/afv-skills 1.14.0 → 1.16.0

package/skills/applying-slds/metadata/blueprints/components/page-headers.yaml

@@ -0,0 +1,135 @@
+name: Page Headers
+description: Header components that provide consistent page structure with titles, actions, and navigation context for application
+  pages.
+category: Layout
+slds_classes:
+  root: slds-page-header
+  elements:
+  - class: slds-page-header__row
+    description: Horizontal row container within header
+    purpose: Organizes header content in rows
+  - class: slds-page-header__title
+    description: Main page title container
+    purpose: Contains the primary page heading
+  - class: slds-page-header__name
+    description: Page name element
+    purpose: Displays the specific page or record name
+  - class: slds-page-header__controls
+    description: Action controls container
+    purpose: Holds primary page actions and buttons
+  - class: slds-page-header__detail-row
+    description: Secondary row for additional details
+    purpose: Contains secondary information below main header
+  modifiers:
+  - class: slds-page-header_object-home
+    description: Object home page header variant
+    usage: For object list/home pages
+  states: []
+variants:
+- name: Base
+  description: Standard page header
+  classes:
+  - slds-page-header
+  usage_context: Default page header for application pages
+  differences: Basic header with title and optional actions
+- name: Record Home
+  description: Header for record detail pages
+  classes:
+  - slds-page-header
+  usage_context: Record detail and edit pages
+  differences: Enhanced header with record-specific layout and actions
+- name: Object Home
+  description: Header for object list pages
+  classes:
+  - slds-page-header
+  - slds-page-header_object-home
+  usage_context: Object list views and home pages
+  differences: Header optimized for list view contexts
+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 through page layout templates
+accessibility:
+  keyboard_support:
+  - Tab navigation through header actions
+  - Enter/Space to activate header controls
+  - Proper heading hierarchy for page structure
+  screen_reader:
+  - Page title and context announced
+  - Header actions clearly described
+  - Page metadata appropriately communicated
+  - Heading hierarchy provides page structure
+  aria_attributes:
+  - aria-labelledby for page header sections
+  - role='banner' for main page header
+  - aria-describedby for additional page context
+  - proper heading levels (h1, h2, etc.)
+usage_guidelines:
+  when_to_use:
+  - For consistent page structure across application
+  - To provide page context and primary actions
+  - When pages need clear titles and navigation
+  - For record and object-specific page layouts
+  when_not_to_use:
+  - For simple pages without complex structure
+  - When custom header layouts are more appropriate
+  - For modal dialogs or overlay content
+  best_practices:
+  - Use clear, descriptive page titles
+  - Place primary actions prominently
+  - Maintain consistent header structure
+  - Provide appropriate page context and metadata
+  - Use proper heading hierarchy
+  common_mistakes:
+  - Inconsistent header layouts across pages
+  - Poor action button placement or labeling
+  - Missing or unclear page context
+  - Improper heading hierarchy
+code_examples:
+- title: Basic Page Header
+  code: "<div class=\"slds-page-header\">\n      <div class=\"slds-page-header__row\">\n        <div class=\"slds-has-flexi-truncate\"\
+    >\n          <div class=\"slds-page-header__name\">\n            <div class=\"slds-page-header__name-title\">\n      \
+    \        <h1>\n                <span class=\"slds-page-header__title slds-truncate\" title=\"Accounts\">Accounts</span>\n\
+    \              </h1>\n            </div>\n          </div>\n        </div>\n        <div class=\"slds-no-flex slds-grid\
+    \ slds-align-top\">\n          <div class=\"slds-page-header__controls\">\n            <div class=\"slds-page-header__control\"\
+    >\n              <button class=\"slds-button slds-button_neutral\">New</button>\n            </div>\n          </div>\n\
+    \        </div>\n      </div>\n      <div class=\"slds-page-header__detail-row\">\n        <div class=\"\">\n        \
+    \  <p class=\"slds-text-body_small\">10 items • Updated 2 hours ago</p>\n        </div>\n      </div>\n      </div>\n"
+- title: Record Home Header
+  code: "<div class=\"slds-page-header\">\n      <div class=\"slds-page-header__row\">\n        <div class=\"slds-has-flexi-truncate\"\
+    >\n          <div class=\"slds-page-header__name\">\n            <div class=\"slds-page-header__name-title\">\n      \
+    \        <h1>\n                <span>Account</span>\n                <span class=\"slds-page-header__title slds-truncate\"\
+    \ title=\"Acme Corporation\">Acme Corporation</span>\n              </h1>\n            </div>\n            <div class=\"\
+    slds-page-header__name-meta\">Account • Customer</div>\n          </div>\n        </div>\n        <div class=\"slds-no-flex\
+    \ slds-grid slds-align-top\">\n          <div class=\"slds-page-header__controls\">\n            <button class=\"slds-button\
+    \ slds-button_neutral\">Edit</button>\n            <button class=\"slds-button slds-button_brand\">Follow</button>\n \
+    \         </div>\n        </div>\n      </div>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - page-header.css
+  - grid.css
+  - truncate.css
+  javascript: []
+  icons: []
+  other_components:
+  - grid
+  - truncate
+  - button
+related_components:
+- name: Global Navigation
+  relationship: similar
+  description: Works together for complete page navigation
+- name: Breadcrumbs
+  relationship: depends-on
+  description: Often included in page headers for navigation context
+- name: Cards
+  relationship: alternative
+  description: Alternative container for page content
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/page-headers/
+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/panels.yaml

@@ -0,0 +1,149 @@
+name: Panels
+description: A flexible container component that provides structured content areas with headers, bodies, and footers, supporting
+  various layouts and content organization patterns for building complex interfaces.
+category: Layout
+slds_classes:
+  root: slds-panel
+  elements:
+  - class: slds-panel__header
+    description: Panel header section
+    purpose: Contains panel title and header actions
+  - class: slds-panel__body
+    description: Panel content area
+    purpose: Contains the main panel content
+  - class: slds-panel__actions
+    description: Panel action controls
+    purpose: Contains buttons and interactive elements
+  - class: slds-panel__close
+    description: Panel close button
+    purpose: Allows panel dismissal
+  modifiers:
+  - class: slds-panel_docked
+    description: Docked panel layout
+    usage: For panels attached to screen edges
+  - class: slds-panel_filters
+    description: Filter panel style
+    usage: For filter and search interfaces
+  states: []
+variants:
+- name: Base
+  description: Standard panel with header, body, and footer
+  classes:
+  - slds-panel
+  usage_context: Default implementation for panel containers
+  differences: Basic panel structure with flexible content area
+- name: Docked
+  description: Panel docked to screen edge
+  classes:
+  - slds-panel
+  - slds-panel_docked
+  usage_context: When panel should be attached to viewport edge
+  differences: Fixed positioning with edge attachment
+- name: Drawer
+  description: Slide-out drawer panel
+  classes:
+  - slds-panel
+  usage_context: For slide-out navigation or content
+  differences: Slide animation and overlay behavior
+- name: Filter
+  description: Panel optimized for filtering interfaces
+  classes:
+  - slds-panel
+  - slds-panel_filters
+  usage_context: For search and filter controls
+  differences: Optimized layout for form controls and filters
+lightning_component:
+  name: lightning-panel
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: Panel functionality often implemented through modal or overlay components
+accessibility:
+  keyboard_support:
+  - Tab navigation through panel content
+  - Escape to close dismissible panels
+  - Arrow keys for panel navigation when applicable
+  - Focus management for panel open/close
+  screen_reader:
+  - Panel purpose and content announced
+  - Panel state changes communicated
+  - Panel structure properly described
+  aria_attributes:
+  - role='region' for panel containers
+  - aria-label for panel purpose
+  - aria-expanded for collapsible panels
+  - aria-hidden for closed panels
+usage_guidelines:
+  when_to_use:
+  - For organizing related content in structured areas
+  - When creating sidebar or detail views
+  - For filter and configuration interfaces
+  - In dashboard and workspace layouts
+  when_not_to_use:
+  - For simple content grouping (use cards instead)
+  - When modal behavior is needed
+  - For single-purpose content displays
+  best_practices:
+  - Provide clear panel headers with descriptive titles
+  - Ensure panels are keyboard accessible
+  - Use appropriate panel types for content
+  - Handle responsive behavior appropriately
+  - Provide clear close/dismiss mechanisms
+  common_mistakes:
+  - Overusing panels for simple content
+  - Poor responsive panel behavior
+  - Missing accessibility considerations
+  - Inconsistent panel sizing and spacing
+code_examples:
+- title: Basic Panel
+  description: Slide-out drawer panel with overlay
+  code: "<!-- Backdrop -->\n      <div class=\"slds-backdrop slds-backdrop_open\" style=\"z-index: 999;\"></div>\n      <!--\
+    \ Drawer Panel -->\n      <div class=\"slds-panel\" role=\"dialog\" aria-label=\"Navigation drawer\" aria-modal=\"true\"\
+    >\n      <div class=\"\" style=\"position: fixed; left: 0; top: 0; width: 280px; height: 100vh; z-index: 1000; transform:\
+    \ translateX(0);\">\n        <div class=\"slds-panel__header\">\n          <div class=\"slds-media slds-media_center\"\
+    >\n            <div class=\"slds-media__body\">\n              <h2 class=\"slds-text-heading_small\">\n              \
+    \  Navigation\n              </h2>\n            </div>\n            <div class=\"slds-media__figure slds-media__figure_reverse\"\
+    >\n              <button class=\"slds-button slds-button_icon slds-panel__close\" title=\"Close navigation\">\n      \
+    \          <svg class=\"slds-button__icon\" 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 navigation</span>\n       \
+    \       </button>\n            </div>\n          </div>\n        </div>\n        <div class=\"slds-panel__body\">\n  \
+    \        <nav class=\"slds-nav-vertical\" aria-label=\"Sub page navigation\">\n            <div class=\"slds-nav-vertical__section\"\
+    >\n              <h3 class=\"slds-nav-vertical__title\">Section 1</h3>\n              <ul>\n                <li class=\"\
+    slds-nav-vertical__item slds-is-active\">\n                  <a href=\"#\" class=\"slds-nav-vertical__action\" aria-current=\"\
+    page\">Item 1</a>\n                </li>\n                <li class=\"slds-nav-vertical__item\">\n                  <a\
+    \ href=\"#\" class=\"slds-nav-vertical__action\">Item 2</a>\n                </li>\n                <li class=\"slds-nav-vertical__item\"\
+    >\n                  <a href=\"#\" class=\"slds-nav-vertical__action\">Item 3</a>\n                </li>\n           \
+    \   </ul>\n            </div>\n            <div class=\"slds-nav-vertical__section\">\n              <h3 class=\"slds-nav-vertical__title\"\
+    >Section 2</h3>\n              <ul>\n                <li class=\"slds-nav-vertical__item\">\n                  <a href=\"\
+    #\" class=\"slds-nav-vertical__action\">Item 4</a>\n                </li>\n                <li class=\"slds-nav-vertical__item\"\
+    >\n                  <a href=\"#\" class=\"slds-nav-vertical__action\">Item 5</a>\n                </li>\n           \
+    \   </ul>\n            </div>\n          </nav>\n        </div>\n      </div>\n      </div>\n"
+dependencies:
+  css_files:
+  - panel.css
+  - button.css
+  - form-element.css
+  javascript:
+  - panel.js
+  - panel-drawer.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - button
+  - form-element
+  - nav-vertical
+related_components:
+- name: Modal
+  relationship: similar
+  description: Similar overlay behavior for some panel types
+- name: Card
+  relationship: alternative
+  description: Alternative for simpler content grouping
+- name: Drawer
+  relationship: variant
+  description: Specific drawer implementation of panels
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/panels/
+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/path.yaml

@@ -0,0 +1,154 @@
+name: "Path"
+description: "A visual component that guides users through a linear process, showing progress through connected steps with clear visual indicators for completion status."
+category: "Navigation"
+slds_classes:
+  root: "slds-path"
+  elements:
+    - class: "slds-path__nav"
+      description: "Navigation container for path steps"
+      purpose: "Contains the list of process steps"
+    - class: "slds-path__item"
+      description: "Individual path step wrapper"
+      purpose: "Contains a single step in the process"
+    - class: "slds-path__link"
+      description: "Clickable step element"
+      purpose: "Interactive element for step navigation"
+    - class: "slds-path__stage"
+      description: "Step stage indicator"
+      purpose: "Visual indicator of step status"
+    - class: "slds-path__title"
+      description: "Step title text"
+      purpose: "Label describing the step"
+  modifiers:
+    - class: "slds-path_has-coaching"
+      description: "Path with coaching content"
+      usage: "When path includes guidance or coaching information"
+  states:
+    - class: "slds-is-complete"
+      description: "Completed step state"
+      trigger: "Steps that have been finished"
+    - class: "slds-is-current"
+      description: "Current step state"
+      trigger: "The active step being worked on"
+    - class: "slds-is-incomplete"
+      description: "Incomplete step state"
+      trigger: "Steps not yet started"
+    - class: "slds-is-active"
+      description: "Active step state"
+      trigger: "Currently selected or focused step"
+variants:
+  - name: "Base"
+    description: "Standard linear path with connected steps"
+    classes:
+      - "slds-path"
+    usage_context: "Default path implementation for process guidance"
+    differences: "Horizontal connected steps showing process progression"
+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 as custom component"
+accessibility:
+  keyboard_support:
+    - "Tab navigation through interactive steps"
+    - "Enter/Space to activate clickable steps"
+    - "Arrow keys for step navigation when appropriate"
+  screen_reader:
+    - "Process structure and current position announced"
+    - "Step completion status communicated"
+    - "Navigation between steps clearly described"
+  aria_attributes:
+    - "role='application' or 'tablist' for path container"
+    - "aria-label describing the process"
+    - "aria-current for the current step"
+    - "aria-describedby for step details"
+usage_guidelines:
+  when_to_use:
+    - "For linear processes with defined steps"
+    - "To show progress through a workflow"
+    - "When users need guidance through a process"
+    - "For sales or approval processes"
+  when_not_to_use:
+    - "For non-linear or flexible processes"
+    - "When steps can be completed in any order"
+    - "For simple binary choices"
+  best_practices:
+    - "Use clear, descriptive step labels"
+    - "Show progress and completion status clearly"
+    - "Allow navigation to previous steps when appropriate"
+    - "Provide guidance or coaching content when helpful"
+    - "Maintain visual connection between steps"
+  common_mistakes:
+    - "Making step labels unclear or too technical"
+    - "Not indicating current position clearly"
+    - "Poor visual connection between steps"
+    - "Allowing navigation to inappropriate steps"
+code_examples:
+  - title: "Basic Path"
+    description: "Sales path showing contacted, open, and unqualified stages"
+    code: |
+      <div class="slds-path">
+            <div class="slds-path__track">
+              <div class="slds-grid slds-path__scroller-container">
+                <div class="slds-path__scroller" role="application">
+                  <div class="slds-path__scroller_inner">
+                    <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
+                      <li class="slds-path__item slds-is-complete" role="presentation">
+                        <a aria-selected="false" class="slds-path__link" href="#" role="option" tabindex="-1">
+                          <span class="slds-path__stage">
+                            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
+                              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
+                            </svg>
+                          </span>
+                          <span class="slds-path__title">Contacted</span>
+                        </a>
+                      </li>
+                      <li class="slds-path__item slds-is-current" role="presentation">
+                        <a aria-selected="true" class="slds-path__link" href="#" role="option" tabindex="0">
+                          <span class="slds-path__stage">
+                            <span class="slds-assistive-text">Current Stage:</span>
+                          </span>
+                          <span class="slds-path__title">Open</span>
+                        </a>
+                      </li>
+                      <li class="slds-path__item slds-is-incomplete" role="presentation">
+                        <a aria-selected="false" class="slds-path__link" href="#" role="option" tabindex="-1">
+                          <span class="slds-path__stage">
+                            <span class="slds-assistive-text">Stage Complete</span>
+                          </span>
+                          <span class="slds-path__title">Unqualified</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+            </div>
+dependencies:
+  css_files:
+    - "path.css"
+    - "grid.css"
+  javascript:
+    - "path.js"
+  icons:
+    - "utility-sprite.svg"
+  other_components:
+    - "grid"
+    - "icons"
+related_components:
+  - name: "Progress Indicator"
+    relationship: "similar"
+    description: "Similar step-based progress visualization"
+  - name: "Breadcrumbs"
+    relationship: "similar"
+    description: "Similar hierarchical navigation concept"
+  - name: "Tabs"
+    relationship: "alternative"
+    description: "Alternative for non-linear content switching"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/path/"
+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/picklist.yaml

@@ -0,0 +1,125 @@
+name: Picklist
+description: A dropdown selection component that presents users with a list of predefined options, similar to select but with
+  enhanced styling and functionality.
+category: Input
+slds_classes:
+  root: slds-picklist
+  elements:
+  - class: slds-picklist__label
+    description: Label for the picklist
+    purpose: Describes the purpose of the selection
+  - class: slds-picklist__item
+    description: Individual option item
+    purpose: Represents a single selectable option
+  modifiers:
+  - class: slds-picklist_fluid
+    description: Full-width picklist variant
+    usage: Picklist that expands to container width
+  states:
+  - class: slds-is-open
+    description: Open dropdown state
+    trigger: When options dropdown is visible
+  - class: slds-is-selected
+    description: Selected option state
+    trigger: Currently selected option(s)
+variants:
+- name: Base
+  description: Standard single-select picklist
+  classes:
+  - slds-picklist
+  usage_context: Default picklist for option selection
+  differences: Dropdown button with selectable options list
+- name: Multi-select
+  description: Picklist allowing multiple selections
+  classes:
+  - slds-picklist
+  usage_context: When users can select multiple options
+  differences: Supports multiple selection with checkboxes
+lightning_component:
+  name: No direct component
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component - similar functionality through lightning-combobox or custom implementation
+accessibility:
+  keyboard_support:
+  - Tab to focus picklist trigger
+  - Enter/Space to open dropdown
+  - Arrow keys to navigate options
+  - Enter/Space to select options
+  - Escape to close dropdown
+  screen_reader:
+  - Picklist purpose and current selection announced
+  - Option list and navigation communicated
+  - Selection changes announced
+  - Multi-select state indicated when applicable
+  aria_attributes:
+  - aria-haspopup='listbox' for dropdown trigger
+  - aria-expanded for dropdown state
+  - role='listbox' for options container
+  - role='option' for individual choices
+  - aria-selected for chosen options
+  - aria-multiselectable for multi-select variant
+usage_guidelines:
+  when_to_use:
+  - For selecting from predefined option lists
+  - When enhanced styling over native select is needed
+  - For multi-select scenarios
+  - When custom option formatting is required
+  when_not_to_use:
+  - For simple cases where native select suffices
+  - When search functionality is needed (use combobox)
+  - For very large option lists (consider combobox)
+  best_practices:
+  - Use clear, descriptive option labels
+  - Order options logically
+  - Provide appropriate default selections
+  - Handle empty states gracefully
+  - Support keyboard navigation fully
+  common_mistakes:
+  - Poor option ordering or grouping
+  - Unclear or ambiguous option labels
+  - Missing keyboard navigation support
+  - Inadequate multi-select feedback
+code_examples:
+- title: Basic Picklist
+  description: Basic picklist with three options
+  code: "<div class=\"slds-picklist\">\n      <button class=\"slds-button slds-button_neutral slds-picklist__label\" aria-haspopup=\"\
+    listbox\" aria-expanded=\"false\">\n        <span class=\"slds-truncate\" title=\"Choose an option\">Choose an option</span>\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_left\">\n        <ul class=\"\" role=\"listbox\">\n          <li class=\"slds-dropdown__item slds-picklist__item\"\
+    \ role=\"option\">\n            <a href=\"#\" role=\"menuitem\">\n              <span class=\"slds-truncate\" title=\"\
+    Option One\">Option One</span>\n            </a>\n          </li>\n          <li class=\"slds-dropdown__item slds-picklist__item\"\
+    \ role=\"option\">\n            <a href=\"#\" role=\"menuitem\">\n              <span class=\"slds-truncate\" title=\"\
+    Option Two\">Option Two</span>\n            </a>\n          </li>\n          <li class=\"slds-dropdown__item slds-picklist__item\"\
+    \ role=\"option\">\n            <a href=\"#\" role=\"menuitem\">\n              <span class=\"slds-truncate\" title=\"\
+    Option Three\">Option Three</span>\n            </a>\n          </li>\n        </ul>\n      </div>\n      </div>\n"
+dependencies:
+  css_files:
+  - picklist.css
+  - dropdown.css
+  - button.css
+  javascript:
+  - picklist.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - dropdown
+  - button
+  - truncate
+related_components:
+- name: Select
+  relationship: alternative
+  description: Native alternative for simple option selection
+- name: Combobox
+  relationship: alternative
+  description: Enhanced version with search capabilities
+- name: Radio Group
+  relationship: alternative
+  description: Alternative for mutually exclusive options
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/picklist/
+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.'