@salesforce/afv-skills 1.22.0 → 1.24.0

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

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

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

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

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