@salesforce/afv-skills 1.14.0 → 1.16.0

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

@@ -0,0 +1,154 @@
+name: "Pills"
+description: "Compact elements that represent selected items, tags, or filters, typically with the ability to be removed by the user."
+category: "Display"
+slds_classes:
+  root: "slds-pill"
+  elements:
+    - class: "slds-pill__label"
+      description: "Text label within the pill"
+      purpose: "Contains the pill's display text"
+    - class: "slds-pill__icon_container"
+      description: "Container for pill icon"
+      purpose: "Holds icon associated with the pill"
+    - class: "slds-pill__remove"
+      description: "Remove button for dismissible pills"
+      purpose: "Allows user to remove the pill"
+  modifiers:
+    - class: "slds-pill_link"
+      description: "Clickable pill variant"
+      usage: "When pill should be interactive/clickable"
+  states:
+    - class: "slds-is-selected"
+      description: "Selected pill state"
+      trigger: "When pill is currently selected"
+    - class: "slds-has-error"
+      description: "Error state for pill"
+      trigger: "When pill represents an error condition"
+variants:
+  - name: "Base"
+    description: "Standard pill element"
+    classes:
+      - "slds-pill"
+    usage_context: "Default pill implementation for tags or selections"
+    differences: "Basic pill with label and optional remove button"
+  - name: "Link"
+    description: "Clickable pill that acts as a link"
+    classes:
+      - "slds-pill"
+      - "slds-pill_link"
+    usage_context: "Interactive pills that navigate or perform actions"
+    differences: "Clickable pill with hover and focus states"
+lightning_component:
+  name: "lightning-pill"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-pill"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS pill blueprint"
+accessibility:
+  keyboard_support:
+    - "Tab to focus interactive pills"
+    - "Enter/Space to activate pill actions"
+    - "Tab to focus remove button"
+    - "Enter/Space to remove pill"
+  screen_reader:
+    - "Pill label announced clearly"
+    - "Removal action announced when available"
+    - "Selection state communicated"
+    - "Error states announced appropriately"
+  aria_attributes:
+    - "aria-label for pills without visible text"
+    - "aria-describedby for additional pill context"
+    - "role='option' in listbox contexts"
+    - "aria-selected for selectable pills"
+usage_guidelines:
+  when_to_use:
+    - "To represent selected items or filters"
+    - "For tags or categories"
+    - "To show applied search criteria"
+    - "For removable selections in forms"
+  when_not_to_use:
+    - "For permanent labels (use badges instead)"
+    - "For navigation items (use navigation components)"
+    - "For status indicators (use badges or icons)"
+  best_practices:
+    - "Keep pill labels concise and descriptive"
+    - "Provide clear removal action when appropriate"
+    - "Use consistent pill styling throughout interface"
+    - "Group related pills logically"
+    - "Limit number of pills to maintain usability"
+  common_mistakes:
+    - "Making pill labels too long or verbose"
+    - "Using pills for non-removable content"
+    - "Poor contrast or visibility"
+    - "Inconsistent pill behavior within the same context"
+code_examples:
+  - title: "Basic Pill"
+    code: |
+      <span class="slds-pill">
+            <a href="#" class="slds-pill__action" title="Full pill label verbiage mirrored here">
+              <span class="slds-pill__label">Pill Label</span>
+            </a>
+            <button class="slds-button slds-button_icon slds-button_icon-bare slds-pill__remove" title="Remove">
+              <svg class="slds-button__icon" aria-hidden="true">
+                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+              </svg>
+              <span class="slds-assistive-text">Remove</span>
+            </button>
+            </span>
+  - title: "Pill with Icon"
+    code: |
+      <span class="slds-pill">
+            <span class="slds-pill__icon_container">
+              <span class="slds-icon_container slds-icon-standard-account">
+                <svg class="slds-icon" aria-hidden="true">
+                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
+                </svg>
+              </span>
+            </span>
+            <a href="#" class="slds-pill__action" title="Account: Acme Corporation">
+              <span class="slds-pill__label">Acme Corporation</span>
+            </a>
+            <button class="slds-button slds-button_icon slds-button_icon-bare slds-pill__remove" title="Remove">
+              <svg class="slds-button__icon" aria-hidden="true">
+                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+              </svg>
+              <span class="slds-assistive-text">Remove</span>
+            </button>
+            </span>
+styling_hooks:
+  - name: "--slds-c-pill-color-background"
+    description: "Background color for pills"
+    category: "color"
+  - name: "--slds-c-pill-color-border"
+    description: "Border color for pills"
+    category: "color"
+  - name: "--slds-c-pill-radius-border"
+    description: "Border radius for pills"
+    category: "border"
+dependencies:
+  css_files:
+    - "pill.css"
+    - "button.css"
+    - "icons.css"
+  javascript: []
+  icons:
+    - "utility-sprite.svg"
+    - "standard-sprite.svg"
+  other_components:
+    - "button-icon"
+    - "icons"
+related_components:
+  - name: "Badge"
+    relationship: "similar"
+    description: "Similar visual treatment for non-removable status"
+  - name: "Pill Container"
+    relationship: "container"
+    description: "Container for managing collections of pills"
+  - name: "Combobox"
+    relationship: "depends-on"
+    description: "Often uses pills to show selected items"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/pills/"
+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/popovers.yaml

@@ -0,0 +1,120 @@
+name: "Popovers"
+description: "Contextual overlays that display additional information or controls related to a specific trigger element, positioned dynamically based on available space."
+category: "Overlay"
+slds_classes:
+  root: "slds-popover"
+  elements:
+    - class: "slds-popover__body"
+      description: "Main content area of the popover"
+      purpose: "Contains the popover's primary content"
+    - class: "slds-popover__header"
+      description: "Header section of the popover"
+      purpose: "Optional header with title or controls"
+    - class: "slds-popover__footer"
+      description: "Footer section of the popover"
+      purpose: "Optional footer with actions or additional info"
+    - class: "slds-nubbin_top"
+      description: "Top-pointing nubbin (arrow)"
+      purpose: "Visual pointer indicating trigger relationship"
+    - class: "slds-nubbin_bottom"
+      description: "Bottom-pointing nubbin"
+      purpose: "Visual pointer for bottom positioning"
+    - class: "slds-nubbin_left"
+      description: "Left-pointing nubbin"
+      purpose: "Visual pointer for left positioning"
+    - class: "slds-nubbin_right"
+      description: "Right-pointing nubbin"
+      purpose: "Visual pointer for right positioning"
+  modifiers:
+    - class: "slds-popover_small"
+      description: "Small popover size"
+      usage: "For minimal content or compact spaces"
+    - class: "slds-popover_medium"
+      description: "Medium popover size"
+      usage: "Default size for most use cases"
+    - class: "slds-popover_large"
+      description: "Large popover size"
+      usage: "For complex content or detailed information"
+  states: []
+variants:
+  - name: "Base"
+    description: "Standard popover with content"
+    classes:
+      - "slds-popover"
+    usage_context: "Default popover for contextual information"
+    differences: "Basic popover with body content and directional nubbin"
+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 custom components or third-party libraries"
+accessibility:
+  keyboard_support:
+    - "Tab to focus trigger element"
+    - "Enter/Space to activate popover"
+    - "Escape to close popover"
+    - "Tab navigation within popover content"
+  screen_reader:
+    - "Popover content announced when displayed"
+    - "Relationship to trigger element communicated"
+    - "Close action clearly identified"
+  aria_attributes:
+    - "aria-describedby linking trigger to popover"
+    - "role='tooltip' for informational popovers"
+    - "role='dialog' for interactive popovers"
+    - "aria-labelledby for popover titles"
+usage_guidelines:
+  when_to_use:
+    - "For contextual help or additional information"
+    - "To display details without leaving current context"
+    - "For secondary actions related to specific elements"
+    - "When space is limited for inline content"
+  when_not_to_use:
+    - "For critical information (use modals instead)"
+    - "For primary navigation"
+    - "When content should always be visible"
+    - "For complex forms or workflows"
+  best_practices:
+    - "Keep popover content concise and focused"
+    - "Position popover to avoid obscuring important content"
+    - "Provide clear trigger indication"
+    - "Use appropriate popover size for content"
+    - "Implement proper dismissal behavior"
+  common_mistakes:
+    - "Making popover content too long or complex"
+    - "Poor positioning that blocks important content"
+    - "Unclear trigger-popover relationship"
+    - "Missing dismissal methods"
+code_examples:
+  - title: "Basic Popover"
+    code: |
+      <div class="slds-popover slds-nubbin_left" role="tooltip">
+            <div class="slds-popover__body">
+              <p>This is helpful contextual information about the element.</p>
+            </div>
+            </div>
+styling_hooks: []
+dependencies:
+  css_files:
+    - "popover.css"
+    - "nubbins.css"
+  javascript:
+    - "popover.js"
+  icons: []
+  other_components: []
+related_components:
+  - name: "Tooltip"
+    relationship: "similar"
+    description: "Similar overlay for simple informational content"
+  - name: "Modal"
+    relationship: "alternative"
+    description: "Alternative for more complex or critical content"
+  - name: "Dropdown"
+    relationship: "similar"
+    description: "Similar positioning concept for menu content"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/popovers/"
+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/progress-bar.yaml

@@ -0,0 +1,110 @@
+name: "Progress Bar"
+description: "A linear indicator that shows the completion status of a task or process, displaying progress as a filled portion of a horizontal bar."
+category: "Feedback"
+slds_classes:
+  root: "slds-progress-bar"
+  elements:
+    - class: "slds-progress-bar__value"
+      description: "The filled portion of the progress bar"
+      purpose: "Visual indicator of completion percentage"
+  modifiers:
+    - class: "slds-progress-bar_x-small"
+      description: "Extra small progress bar height"
+      usage: "Compact progress indicator"
+    - class: "slds-progress-bar_small"
+      description: "Small progress bar height"
+      usage: "Smaller progress indicator"
+    - class: "slds-progress-bar_medium"
+      description: "Medium progress bar height (default)"
+      usage: "Standard progress bar size"
+    - class: "slds-progress-bar_large"
+      description: "Large progress bar height"
+      usage: "Prominent progress indicator"
+    - class: "slds-progress-bar_circular"
+      description: "Circular progress bar variant"
+      usage: "Alternative circular progress visualization"
+  states: []
+variants:
+  - name: "Base"
+    description: "Standard horizontal progress bar"
+    classes:
+      - "slds-progress-bar"
+    usage_context: "Default progress visualization for linear tasks"
+    differences: "Horizontal bar with filled progress indicator"
+lightning_component:
+  name: "lightning-progress-bar"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-bar"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS progress bar blueprint"
+accessibility:
+  keyboard_support:
+    - "No specific keyboard interactions required"
+  screen_reader:
+    - "Progress value announced as percentage"
+    - "Progress updates communicated to assistive technology"
+    - "Progress bar purpose described through labeling"
+  aria_attributes:
+    - "role='progressbar' for progress semantic"
+    - "aria-valuenow for current progress value"
+    - "aria-valuemin='0' for minimum value"
+    - "aria-valuemax='100' for maximum value"
+    - "aria-label describing the progress task"
+usage_guidelines:
+  when_to_use:
+    - "To show completion progress of tasks"
+    - "For file uploads or downloads"
+    - "During multi-step processes"
+    - "When users need to understand progress status"
+  when_not_to_use:
+    - "For indeterminate loading (use spinner instead)"
+    - "When progress cannot be measured"
+    - "For instant operations"
+  best_practices:
+    - "Show actual progress percentage when possible"
+    - "Update progress smoothly and frequently"
+    - "Provide context about what's progressing"
+    - "Use appropriate size for the context"
+    - "Include text labels for clarity"
+  common_mistakes:
+    - "Not updating progress frequently enough"
+    - "Using progress bars for indeterminate states"
+    - "Poor labeling of what's being tracked"
+    - "Inconsistent progress reporting"
+code_examples:
+  - title: "Basic Progress Bar"
+    code: |
+      <div class="slds-progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-label="Progress: 25%">
+            <span class="slds-progress-bar__value" style="width: 25%;">
+              <span class="slds-assistive-text">Progress: 25%</span>
+            </span>
+            </div>
+  - title: "Large Progress Bar"
+    code: |
+      <div class="slds-progress-bar slds-progress-bar_large" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress: 75%">
+            <span class="slds-progress-bar__value" style="width: 75%;">
+              <span class="slds-assistive-text">Upload progress: 75%</span>
+            </span>
+            </div>
+styling_hooks: []
+dependencies:
+  css_files:
+    - "progress-bar.css"
+  javascript: []
+  icons: []
+  other_components: []
+related_components:
+  - name: "Progress Ring"
+    relationship: "alternative"
+    description: "Circular alternative for progress visualization"
+  - name: "Progress Indicator"
+    relationship: "similar"
+    description: "Step-based progress for multi-step processes"
+  - name: "Spinner"
+    relationship: "alternative"
+    description: "Alternative for indeterminate loading states"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/progress-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/progress-indicator.yaml

@@ -0,0 +1,133 @@
+name: Progress Indicator
+description: A visual component that shows the user's progress through a multi-step process or workflow, indicating current
+  position and completed steps.
+category: Feedback
+slds_classes:
+  root: slds-progress
+  elements:
+  - class: slds-progress__list
+    description: Container for progress steps
+    purpose: Holds the list of process steps
+  - class: slds-progress__item
+    description: Individual progress step
+    purpose: Represents a single step in the process
+  - class: slds-progress__marker
+    description: Visual marker for step
+    purpose: Provides visual indicator for step state
+  modifiers:
+  - class: slds-progress_vertical
+    description: Vertical progress indicator
+    usage: When vertical layout is preferred
+  - class: slds-progress_shade
+    description: Progress indicator with shaded background
+    usage: Enhanced visual emphasis
+  states:
+  - class: slds-is-completed
+    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-has-error
+    description: Error step state
+    trigger: Steps with validation errors
+variants:
+- name: Base
+  description: Standard horizontal progress indicator
+  classes:
+  - slds-progress
+  usage_context: Default progress display for multi-step processes
+  differences: Horizontal layout with step markers and labels
+- name: Vertical
+  description: Vertical progress indicator
+  classes:
+  - slds-progress
+  - slds-progress_vertical
+  usage_context: When vertical space is available and preferred
+  differences: Vertical layout with step progression
+lightning_component:
+  name: lightning-progress-indicator
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-indicator
+  mapping_notes: Direct mapping - Lightning component implements SLDS progress indicator blueprint
+accessibility:
+  keyboard_support:
+  - Tab navigation through interactive steps
+  - Enter/Space to activate clickable steps
+  - Arrow keys for step navigation when appropriate
+  screen_reader:
+  - Progress state and current position announced
+  - Step labels and completion status communicated
+  - Total steps and current step number provided
+  aria_attributes:
+  - role='progressbar' for overall progress
+  - aria-valuenow, aria-valuemin, aria-valuemax for progress values
+  - aria-label describing the process
+  - aria-current for the current step
+usage_guidelines:
+  when_to_use:
+  - For multi-step processes or workflows
+  - When users need to understand their progress
+  - To show completion status of a sequence
+  - For guided setup or onboarding flows
+  when_not_to_use:
+  - For single-step processes
+  - When steps are not sequential
+  - For simple loading states (use spinners instead)
+  best_practices:
+  - Use clear, descriptive step labels
+  - Show current position prominently
+  - Allow navigation to completed steps when appropriate
+  - Provide estimated time or completion percentage
+  - Handle error states gracefully
+  common_mistakes:
+  - Too many steps making progress unclear
+  - Unclear or inconsistent step labeling
+  - Not indicating current position clearly
+  - Poor error state handling
+code_examples:
+- title: Three-Step Progress Indicator
+  code: "<div class=\"slds-progress\">\n      <ol class=\"slds-progress__list\">\n        <li class=\"slds-progress__item\
+    \ slds-is-completed\">\n          <button class=\"slds-button slds-progress__marker\">\n            <span class=\"slds-assistive-text\"\
+    >Step 1 - Completed</span>\n          </button>\n          <div class=\"slds-progress__item_content slds-grid slds-grid_align-spread\"\
+    >\n            <div class=\"slds-size_1-of-2\">\n              <h3 class=\"\">Contact Information</h3>\n            </div>\n\
+    \          </div>\n        </li>\n        <li class=\"slds-progress__item slds-is-current\">\n          <button class=\"\
+    slds-button slds-progress__marker\">\n            <span class=\"slds-assistive-text\">Step 2 - Current</span>\n      \
+    \    </button>\n          <div class=\"slds-progress__item_content slds-grid slds-grid_align-spread\">\n            <div\
+    \ class=\"slds-size_1-of-2\">\n              <h3 class=\"\">Account Details</h3>\n            </div>\n          </div>\n\
+    \        </li>\n        <li class=\"slds-progress__item slds-is-incomplete\">\n          <button class=\"slds-button slds-progress__marker\"\
+    >\n            <span class=\"slds-assistive-text\">Step 3 - Incomplete</span>\n          </button>\n          <div class=\"\
+    slds-progress__item_content slds-grid slds-grid_align-spread\">\n            <div class=\"slds-size_1-of-2\">\n      \
+    \        <h3 class=\"\">Review & Submit</h3>\n            </div>\n          </div>\n        </li>\n      </ol>\n     \
+    \ </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - progress.css
+  - grid.css
+  - button.css
+  javascript:
+  - progress.js
+  icons: []
+  other_components:
+  - button
+  - grid
+related_components:
+- name: Progress Bar
+  relationship: similar
+  description: Alternative progress visualization
+- name: Progress Ring
+  relationship: similar
+  description: Circular progress indicator
+- name: Path
+  relationship: similar
+  description: Similar step-based navigation
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/progress-indicator/
+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/progress-ring.yaml

@@ -0,0 +1,102 @@
+name: Progress Ring
+description: A circular progress indicator that shows completion status as a filled arc, providing an alternative visualization
+  to linear progress bars.
+category: Feedback
+slds_classes:
+  root: slds-progress-ring
+  elements:
+  - class: slds-progress-ring__progress
+    description: The progress arc element
+    purpose: SVG element that displays the completion arc
+  - class: slds-progress-ring__content
+    description: Content area in the center of the ring
+    purpose: Optional content displayed within the progress ring
+  modifiers:
+  - class: slds-progress-ring_large
+    description: Large progress ring size
+    usage: Prominent progress display
+  states:
+  - class: slds-progress-ring_complete
+    description: Completed progress state
+    trigger: When progress reaches 100%
+  - class: slds-progress-ring_warning
+    description: Warning progress state
+    trigger: When progress indicates a warning condition
+  - class: slds-progress-ring_expired
+    description: Expired progress state
+    trigger: When progress has expired or failed
+variants:
+- name: Base
+  description: Standard circular progress ring
+  classes:
+  - slds-progress-ring
+  usage_context: Default circular progress visualization
+  differences: Circular progress indicator with arc fill
+lightning_component:
+  name: lightning-progress-ring
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-ring
+  mapping_notes: Direct mapping - Lightning component implements SLDS progress ring blueprint
+accessibility:
+  keyboard_support:
+  - No specific keyboard interactions required
+  screen_reader:
+  - Progress value announced as percentage
+  - Progress state changes communicated
+  - Ring purpose described through labeling
+  aria_attributes:
+  - role='progressbar' for progress semantic
+  - aria-valuenow for current progress value
+  - aria-valuemin='0' for minimum value
+  - aria-valuemax='100' for maximum value
+  - aria-label describing the progress task
+usage_guidelines:
+  when_to_use:
+  - For circular progress visualization
+  - When space constraints favor circular layout
+  - To show completion of circular processes
+  - For dashboard or metric displays
+  when_not_to_use:
+  - When linear progress is more intuitive
+  - For indeterminate loading (use spinner instead)
+  - When detailed progress steps are needed
+  best_practices:
+  - Use appropriate size for context and importance
+  - Include percentage or completion text when helpful
+  - Choose colors that convey appropriate meaning
+  - Update progress smoothly
+  - Consider animation for progress changes
+  common_mistakes:
+  - Making progress ring too small to read
+  - Using inappropriate colors for progress state
+  - Not providing progress value to assistive technology
+  - Poor contrast between ring and background
+code_examples:
+- title: Basic Progress Ring
+  code: "<div class=\"slds-progress-ring\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"\
+    100\" aria-label=\"Progress: 75%\">\n      <svg viewBox=\"-1 -1 2 2\" class=\"slds-progress-ring__progress\">\n      \
+    \  <circle class=\"slds-progress-ring__path\" r=\"1\"></circle>\n        <circle class=\"\" r=\"1\" style=\"stroke-dasharray:\
+    \ 4.712, 6.283\"></circle>\n      </svg>\n      <div class=\"slds-progress-ring__content\">75%</div>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - progress-ring.css
+  javascript: []
+  icons: []
+  other_components: []
+related_components:
+- name: Progress Bar
+  relationship: alternative
+  description: Linear alternative for progress visualization
+- name: Progress Indicator
+  relationship: similar
+  description: Step-based progress for multi-step processes
+- name: Spinner
+  relationship: alternative
+  description: Alternative for indeterminate loading states
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/progress-ring/
+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.'