@salesforce/afv-skills 1.22.0 → 1.24.0

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

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

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

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

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

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