@salesforce/afv-skills 1.22.0 → 1.24.0

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

@@ -1,108 +0,0 @@
-name: Checkbox
-description: An input control that allows users to select one or more options from a set, providing binary choice selection
-  with clear visual feedback.
-category: Input
-slds_classes:
-  root: slds-checkbox
-  elements:
-  - class: slds-checkbox__label
-    description: Label element for the checkbox
-    purpose: Provides clickable area and describes the option
-  modifiers: []
-  states:
-  - class: slds-has-error
-    description: Error state styling
-    trigger: When checkbox validation fails
-  - class: slds-is-disabled
-    description: Disabled state styling
-    trigger: When checkbox is not interactive
-variants:
-- name: Base
-  description: Standard checkbox input
-  classes:
-  - slds-checkbox
-  usage_context: Default checkbox implementation
-  differences: Standard checkbox with label and custom styling
-lightning_component:
-  name: lightning-input (type='checkbox')
-  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-input
-  mapping_notes: Mapped through lightning-input with type='checkbox'
-accessibility:
-  keyboard_support:
-  - Tab to focus the checkbox
-  - Space to toggle checkbox state
-  - Enter may toggle in some contexts
-  screen_reader:
-  - Checkbox state announced (checked/unchecked)
-  - Label text read with the checkbox
-  - Error messages associated and announced
-  aria_attributes:
-  - aria-describedby for error messages
-  - aria-invalid when validation fails
-  - aria-required for required checkboxes
-usage_guidelines:
-  when_to_use:
-  - For binary choices (yes/no, true/false)
-  - When users can select multiple options
-  - For toggling features or settings
-  - In forms where multiple selections are allowed
-  when_not_to_use:
-  - For mutually exclusive options (use radio buttons)
-  - When only one option can be selected
-  - For actions (use buttons instead)
-  best_practices:
-  - Use clear, descriptive labels
-  - Group related checkboxes logically
-  - Provide immediate feedback for state changes
-  - Use consistent checkbox styling throughout the interface
-  - Ensure adequate touch target size
-  common_mistakes:
-  - Using checkboxes for mutually exclusive options
-  - Making labels too long or unclear
-  - Not providing feedback for state changes
-  - Using checkboxes for actions instead of selections
-code_examples:
-- title: Basic Checkbox
-  code: "<div class=\"slds-form-element\">\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox\"\
-    >\n          <input type=\"checkbox\" name=\"options\" id=\"checkbox-1\" value=\"option1\" />\n          <label class=\"\
-    slds-checkbox__label\" for=\"checkbox-1\">\n            <span class=\"\"></span>\n            <span class=\"slds-form-element__label\"\
-    >Accept terms and conditions</span>\n          </label>\n        </div>\n      </div>\n      </div>\n"
-- title: Checkbox with Error
-  code: "<div class=\"slds-form-element slds-has-error\">\n      <div class=\"slds-form-element__control\">\n        <div\
-    \ class=\"slds-checkbox\">\n          <input type=\"checkbox\" name=\"options\" id=\"checkbox-error\" value=\"option1\"\
-    \ aria-describedby=\"checkbox-error-message\" />\n          <label class=\"slds-checkbox__label\" for=\"checkbox-error\"\
-    >\n            <span class=\"\"></span>\n            <span class=\"slds-form-element__label\">Required checkbox</span>\n\
-    \          </label>\n        </div>\n      </div>\n      <div id=\"checkbox-error-message\" class=\"slds-form-element__help\"\
-    >This field is required</div>\n      </div>\n"
-styling_hooks:
-- name: --slds-c-checkbox-color-background
-  description: Background color for checkbox
-  category: color
-- name: --slds-c-checkbox-color-border
-  description: Border color for checkbox
-  category: color
-dependencies:
-  css_files:
-  - checkbox.css
-  - form-element.css
-  javascript: []
-  icons: []
-  other_components:
-  - form-element
-related_components:
-- name: Radio Group
-  relationship: alternative
-  description: For mutually exclusive options
-- name: Checkbox Group
-  relationship: container
-  description: Multiple checkboxes grouped together
-- name: Toggle
-  relationship: similar
-  description: Alternative binary input control
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/checkbox/
-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/color-picker.yaml

@@ -1,172 +0,0 @@
-name: Color Picker
-description: A fully featured color selection component that provides both predefined color swatches and a custom color picker
-  with hue, saturation, and brightness controls. Allows users to select colors visually or input hex values.
-category: Complex Components
-slds_classes:
-  root: slds-color-picker
-  elements:
-  - class: slds-color-picker__summary-label
-    description: Label for the color summary input
-    purpose: Provides accessible label for color input
-  - class: slds-color-picker__summary-button
-    description: Button that toggles the color picker selector
-    purpose: Opens/closes the color selection popover
-  - class: slds-color-picker__summary-input
-    description: Input field showing hex color value
-    purpose: Displays and accepts hex color input
-  - class: slds-color-picker__selector
-    description: Selector popover component
-    purpose: Container for swatches and custom picker
-  - class: slds-color-picker__swatches
-    description: Container for color swatches
-    purpose: Holds predefined color options
-  - class: slds-color-picker__swatch
-    description: Individual color swatch
-    purpose: Displays clickable color option
-  - class: slds-color-picker__swatch-trigger
-    description: Trigger button for swatch selection
-    purpose: Interactive element for swatch clicks
-  - class: slds-color-picker__custom
-    description: Custom color picker container
-    purpose: Holds custom color selection controls
-  - class: slds-color-picker__custom-range
-    description: Custom color range selector
-    purpose: 2D selector for saturation and brightness
-  - class: slds-color-picker__range-indicator
-    description: Indicator for range position
-    purpose: Shows selected point in color range
-  - class: slds-color-picker__hue-and-preview
-    description: Container for hue slider and preview
-    purpose: Groups hue control with color preview
-  - class: slds-color-picker__hue-slider
-    description: Slider for hue selection
-    purpose: Controls the color hue value
-  modifiers: []
-  states:
-  - class: slds-is-open
-    description: Open state for color picker popover
-    trigger: When color picker selector is visible
-  - class: slds-is-selected
-    description: Selected state for swatch
-    trigger: When swatch is currently selected color
-variants:
-- name: Base
-  description: Full color picker with swatches and custom selector
-  classes:
-  - slds-color-picker
-  usage_context: Default color picker implementation
-  differences: Complete color selection interface
-lightning_component:
-  name: lightning-input
-  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-input
-  mapping_notes: lightning-input with type='color' provides basic color picker, but not as fully featured as SLDS color-picker
-accessibility:
-  keyboard_support:
-  - Tab to navigate between swatches and controls
-  - Arrow keys to move through swatch grid
-  - Enter or Space to select swatch
-  - Arrow keys to adjust hue slider
-  - Escape to close picker
-  screen_reader:
-  - Color picker role announced
-  - Selected color value announced
-  - Swatch colors announced
-  - Slider values announced
-  aria_attributes:
-  - role='listbox' on swatches container
-  - role='option' on individual swatches
-  - aria-label with color name/hex value
-  - aria-selected on active swatch
-  - aria-valuemin, aria-valuemax, aria-valuenow on sliders
-usage_guidelines:
-  when_to_use:
-  - For selecting brand or theme colors
-  - When users need to customize colors
-  - For design or customization features
-  - When both preset and custom colors are needed
-  when_not_to_use:
-  - For simple binary color choices (use toggle)
-  - When only preset colors are needed (use swatch selector)
-  - For system-level color settings
-  - When color input is too complex for users
-  best_practices:
-  - Provide common color swatches for quick selection
-  - Allow hex value input for precision
-  - Show color preview clearly
-  - Include accessibility contrast indicators
-  - Group related colors in swatches
-  - Provide named color options when possible
-  common_mistakes:
-  - Too many swatch options overwhelming users
-  - Missing hex input option
-  - Poor contrast in color preview
-  - Not showing selected color clearly
-  - Inadequate keyboard navigation
-code_examples:
-- title: Basic Color Picker
-  code: "<div class=\"slds-color-picker\">\n      <div class=\"\">\n        <label class=\"slds-color-picker__summary-label\"\
-    \ for=\"color-picker-summary-input\">\n          Choose Color\n        </label>\n        <button class=\"slds-button slds-color-picker__summary-button\
-    \ slds-button_icon slds-button_icon-more\" aria-haspopup=\"dialog\">\n          <span class=\"slds-swatch\" style=\"background:\
-    \ rgb(0, 112, 210);\">\n            <span class=\"slds-assistive-text\">Selected color: #0070D2</span>\n          </span>\n\
-    \          <svg class=\"slds-button__icon slds-button__icon_small\" aria-hidden=\"true\">\n            <use xlink:href=\"\
-    /assets/icons/utility-sprite/svg/symbols.svg#down\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\"\
-    >Choose a color</span>\n        </button>\n        <input type=\"text\" id=\"color-picker-summary-input\" class=\"slds-input\
-    \ slds-color-picker__summary-input\" value=\"#0070D2\" />\n      </div>\n      <section class=\"slds-popover slds-color-picker__selector\
-    \ slds-hide\" role=\"dialog\" aria-label=\"Choose a color\">\n        <div class=\"slds-popover__body\">\n          <div\
-    \ class=\"slds-color-picker__swatches\">\n            <fieldset>\n              <legend class=\"slds-assistive-text\"\
-    >Preset colors</legend>\n              <ul class=\"\" role=\"listbox\">\n                <li role=\"presentation\">\n\
-    \                  <button class=\"slds-swatch\" role=\"option\" aria-selected=\"true\" style=\"background: rgb(0, 112,\
-    \ 210);\">\n                    <span class=\"slds-assistive-text\">#0070D2</span>\n                  </button>\n    \
-    \            </li>\n                <li role=\"presentation\">\n                  <button class=\"slds-swatch\" role=\"\
-    option\" style=\"background: rgb(255, 154, 60);\">\n                    <span class=\"slds-assistive-text\">#FF9A3C</span>\n\
-    \                  </button>\n                </li>\n                <li role=\"presentation\">\n                  <button\
-    \ class=\"slds-swatch\" role=\"option\" style=\"background: rgb(4, 132, 75);\">\n                    <span class=\"slds-assistive-text\"\
-    >#04844B</span>\n                  </button>\n                </li>\n              </ul>\n            </fieldset>\n  \
-    \        </div>\n          <div class=\"slds-color-picker__custom\">\n            <p class=\"slds-assistive-text\" id=\"\
-    color-picker-instructions\">\n              Use arrow keys to select saturation and brightness, on an x and y axis.\n\
-    \            </p>\n            <div class=\"slds-color-picker__custom-range\" style=\"background: rgb(0, 112, 210);\"\
-    >\n              <a class=\"slds-color-picker__range-indicator\" href=\"#\" aria-live=\"assertive\" aria-atomic=\"true\"\
-    \ aria-describedby=\"color-picker-instructions\">\n                <span class=\"slds-assistive-text\">Saturation: 100%.\
-    \ Brightness: 50%.</span>\n              </a>\n            </div>\n          </div>\n        </div>\n        <footer class=\"\
-    slds-popover__footer\">\n          <button class=\"slds-button slds-button_neutral\">Cancel</button>\n          <button\
-    \ class=\"slds-button slds-button_brand\">Done</button>\n        </footer>\n      </section>\n      </div>\n"
-styling_hooks: []
-dependencies:
-  css_files:
-  - color-picker.css
-  - popover.css
-  - swatch.css
-  - button.css
-  javascript:
-  - Color picker open/close
-  - Swatch selection
-  - Custom color range interaction
-  - Hue slider management
-  - Hex value validation
-  icons:
-  - utility:down
-  other_components:
-  - popover
-  - button
-  - input
-related_components:
-- name: Swatch
-  relationship: contains
-  description: Color swatch display element
-- name: Popover
-  relationship: container
-  description: Popover for color selector
-- name: Slider
-  relationship: similar
-  description: Similar range input pattern
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/color-picker/
-metadata:
-  version: 1.0.0
-  last_updated: '2025-11-12'
-  author: SLDS Documentation Team
-  slds_version: 2.27.2
-  review_status: complete
-  source: official-slds
-  notes: Created from official SLDS documentation and design-system-internal source code 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/combobox.yaml

@@ -1,136 +0,0 @@
-name: Combobox
-description: A composite input control that combines a text input with a dropdown list, allowing users to either type or select
-  from predefined options.
-category: Input
-slds_classes:
-  root: slds-combobox_container
-  elements:
-  - class: slds-combobox
-    description: Main combobox wrapper
-    purpose: Contains the input and dropdown components
-  - class: slds-combobox__form-element
-    description: Form element wrapper for the input
-    purpose: Provides form styling and structure
-  - class: slds-combobox__input
-    description: Text input element
-    purpose: Allows typing and displays selected value
-  - class: slds-combobox__input-entity-icon
-    description: Icon for the selected entity
-    purpose: Visual indicator for selected item type
-  - class: slds-listbox
-    description: Dropdown list container
-    purpose: Contains the selectable options
-  - class: slds-listbox__option
-    description: Individual option in the dropdown
-    purpose: Represents a selectable item
-  - class: slds-listbox__option-meta
-    description: Additional metadata for an option
-    purpose: Contains supplementary option information
-  modifiers:
-  - class: slds-is-open
-    description: Open state for the dropdown
-    usage: When the dropdown list is visible
-  - class: slds-has-focus
-    description: Focus state styling
-    usage: When the combobox has keyboard focus
-  states:
-  - class: slds-has-error
-    description: Error state styling
-    trigger: When combobox validation fails
-variants:
-- name: Base
-  description: Standard combobox with dropdown options
-  classes:
-  - slds-combobox_container
-  usage_context: Default combobox implementation
-  differences: Text input with dropdown list of options
-lightning_component:
-  name: lightning-combobox
-  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox
-  mapping_notes: Direct mapping - Lightning component implements SLDS combobox blueprint
-accessibility:
-  keyboard_support:
-  - Tab to focus the combobox
-  - Arrow keys to navigate dropdown options
-  - Enter to select highlighted option
-  - Escape to close dropdown
-  - Type to filter options
-  screen_reader:
-  - Combobox role and state announced
-  - Option count and current selection announced
-  - Filtered results communicated
-  aria_attributes:
-  - role='combobox' on input element
-  - aria-expanded to indicate dropdown state
-  - aria-activedescendant for current option
-  - aria-autocomplete for input behavior
-  - role='listbox' for dropdown container
-  - role='option' for individual items
-usage_guidelines:
-  when_to_use:
-  - When users need to select from a large list of options
-  - For autocomplete or search functionality
-  - When typing to filter is beneficial
-  - For lookups and entity selection
-  when_not_to_use:
-  - For small, fixed lists (use select instead)
-  - When only pre-defined options are allowed (use select)
-  - For binary choices (use checkbox or radio)
-  best_practices:
-  - Provide helpful placeholder text
-  - Show option count when filtering
-  - Include clear visual feedback for selection
-  - Handle empty states gracefully
-  - Support keyboard navigation completely
-  common_mistakes:
-  - Not providing keyboard navigation
-  - Unclear filtering behavior
-  - Poor empty state handling
-  - Inadequate loading states
-code_examples:
-- title: Basic Combobox
-  code: "<div class=\"slds-combobox_container\">\n      <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\"\
-    \ role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n        <div class=\"slds-combobox__form-element\
-    \ slds-input-has-icon slds-input-has-icon_right\">\n          <input type=\"text\" class=\"slds-input slds-combobox__input\"\
-    \ role=\"textbox\" placeholder=\"Select an option...\" readonly />\n          <span class=\"slds-icon_container slds-icon-utility-down\
-    \ slds-input__icon slds-input__icon_right\">\n            <svg class=\"slds-icon slds-icon slds-icon_x-small\" aria-hidden=\"\
-    true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>\n            </svg>\n\
-    \          </span>\n        </div>\n        <div class=\"slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid\" role=\"\
-    listbox\">\n          <ul class=\"slds-listbox slds-listbox_vertical\">\n            <li role=\"presentation\" class=\"\
-    \">\n              <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\" role=\"option\">\n      \
-    \          <span class=\"slds-media__body\">\n                  <span class=\"slds-listbox__option-text_entity\">Option\
-    \ One</span>\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n    \
-    \  </div>\n      </div>\n"
-styling_hooks: []
-dependencies:
-  css_files:
-  - combobox.css
-  - listbox.css
-  - dropdown.css
-  - input.css
-  javascript:
-  - combobox.js
-  icons:
-  - utility-sprite.svg
-  other_components:
-  - input
-  - listbox
-  - dropdown
-  - icons
-related_components:
-- name: Select
-  relationship: alternative
-  description: For smaller, fixed option lists
-- name: Lookup
-  relationship: similar
-  description: Similar search and select pattern
-- name: Picklist
-  relationship: alternative
-  description: Alternative selection control
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/combobox/
-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/counter.yaml

@@ -1,147 +0,0 @@
-name: "Counter"
-
-description: "A number input field with increment and decrement buttons, allowing users to adjust numeric values using buttons or direct input. Commonly used for quantity selection, age input, or any numeric field where step-wise adjustment is helpful."
-
-category: "Input"
-
-slds_classes:
-  root: "slds-input_counter"
-  elements:
-    - class: "slds-input_counter"
-      description: "Variant for number input with increment and decrement buttons"
-      purpose: "Creates a centered number input field with padding for button placement"
-    - class: "slds-input__button_decrement"
-      description: "Decrement button within counter input field"
-      purpose: "Positions the minus/decrement button on the left side of the input"
-    - class: "slds-input__button_increment"
-      description: "Increment button within counter input field"
-      purpose: "Positions the plus/increment button on the right side of the input"
-  modifiers: []
-  states: []
-
-variants:
-  - name: "Base"
-    description: "Standard number input with increment/decrement buttons"
-    classes: ["slds-input_counter"]
-    usage_context: "Default implementation for numeric input with buttons"
-    differences: "Input field centered with buttons on left and right"
-
-lightning_component:
-  name: "lightning-input"
-  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-input"
-  mapping_notes: "Use type='number' with lightning-input, counter styling is applied automatically"
-
-accessibility:
-  keyboard_support:
-    - "Tab to navigate to the input field"
-    - "Arrow keys or direct typing to change value"
-    - "Enter to submit if in a form"
-    - "Click or Space on increment/decrement buttons"
-  screen_reader:
-    - "Input field should have a descriptive label"
-    - "Current value should be announced when changed"
-    - "Min and max values should be communicated"
-  aria_attributes:
-    - "aria-label or associated <label> for the input"
-    - "aria-valuemin and aria-valuemax for valid range"
-    - "aria-valuenow for current value"
-
-usage_guidelines:
-  when_to_use:
-    - "For quantity selection (e.g., product quantity in shopping cart)"
-    - "For age or year input where step-wise adjustment is helpful"
-    - "When users benefit from visual increment/decrement controls"
-    - "For numeric fields where keyboard-only input may be difficult"
-  when_not_to_use:
-    - "For large ranges where buttons are impractical (use slider instead)"
-    - "For displaying metrics (use different display components)"
-    - "When precision typing is critical (use standard number input)"
-  best_practices:
-    - "Set appropriate min, max, and step attributes"
-    - "Provide clear labels indicating the unit or context"
-    - "Ensure buttons are touch-friendly on mobile devices"
-    - "Consider showing the valid range in help text"
-  common_mistakes:
-    - "Forgetting to set min/max constraints"
-    - "Making the step value too large or too small for the use case"
-    - "Poor button sizing making them hard to interact with"
-
-code_examples:
-  - title: "Basic Counter Input"
-    description: "Number input with increment and decrement buttons"
-    code: |
-      <div class="slds-form-element">
-        <label class="slds-form-element__label" for="counter-input-01">
-          Quantity
-        </label>
-        <div class="slds-form-element__control">
-          <div class="slds-input-has-icon slds-input-has-icon_left-right">
-            <button class="slds-button slds-button_icon slds-input__button_decrement" title="Decrease" tabindex="-1">
-              <svg class="slds-button__icon" aria-hidden="true">
-                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#dash"></use>
-              </svg>
-              <span class="slds-assistive-text">Decrease</span>
-            </button>
-            <input type="number" id="counter-input-01" min="1" max="100" step="1" value="1" class="slds-input slds-input_counter" />
-            <button class="slds-button slds-button_icon slds-input__button_increment" title="Increase" tabindex="-1">
-              <svg class="slds-button__icon" aria-hidden="true">
-                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
-              </svg>
-              <span class="slds-assistive-text">Increase</span>
-            </button>
-          </div>
-        </div>
-      </div>
-  - title: "Counter with Help Text"
-    description: "Counter input with additional context"
-    code: |
-      <div class="slds-form-element">
-        <label class="slds-form-element__label" for="counter-input-02">
-          Number of Attendees
-        </label>
-        <div class="slds-form-element__control">
-          <div class="slds-input-has-icon slds-input-has-icon_left-right">
-            <button class="slds-button slds-button_icon slds-input__button_decrement" title="Decrease">
-              <svg class="slds-button__icon" aria-hidden="true">
-                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#dash"></use>
-              </svg>
-              <span class="slds-assistive-text">Decrease</span>
-            </button>
-            <input type="number" id="counter-input-02" min="0" max="500" step="5" value="10" class="slds-input slds-input_counter" aria-describedby="help-text-02" />
-            <button class="slds-button slds-button_icon slds-input__button_increment" title="Increase">
-              <svg class="slds-button__icon" aria-hidden="true">
-                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
-              </svg>
-              <span class="slds-assistive-text">Increase</span>
-            </button>
-          </div>
-        </div>
-        <div class="slds-form-element__help" id="help-text-02">Maximum 500 attendees</div>
-      </div>
-styling_hooks: []
-
-dependencies:
-  css_files: ["input.css", "button.css", "form-element.css"]
-  javascript: ["counter-input-behavior.js"]
-  icons: ["utility:dash", "utility:add"]
-  other_components: ["input", "button", "form-element"]
-
-related_components:
-  - name: "Input"
-    relationship: "parent"
-    description: "Counter is a variant of the standard input component"
-  - name: "Slider"
-    relationship: "alternative"
-    description: "Alternative for numeric input with visual feedback"
-  - name: "Spinner"
-    relationship: "alternative"
-    description: "Alternative numeric input with vertical buttons"
-
-references:
-  official_docs: "https://v1.lightningdesignsystem.com/components/counter/"
-
-metadata:
-  version: "2.0.0"
-  last_updated: "2025-11-12"
-  review_status: "complete"
-  notes: "Corrected to match actual SLDS implementation as input counter (number input with +/- buttons), not metric display counter"