@salesforce/afv-skills 1.22.0 → 1.23.0

package/skills/applying-slds/metadata/blueprints/components/vertical-tabs.yaml

@@ -1,140 +0,0 @@
-name: Vertical Tabs
-description: Vertical tabs provide a navigation pattern where tab items are arranged vertically, typically on the left side
-  of the content area. They allow users to switch between different views or sections of content.
-category: Navigation
-slds_classes:
-  root: slds-vertical-tabs
-  elements:
-  - class: slds-vertical-tabs__nav
-    description: Navigation container for vertical tabs
-    purpose: Contains the list of tab items
-  - class: slds-vertical-tabs__nav-item
-    description: Individual tab navigation item
-    purpose: Container for each tab button/link
-  - class: slds-vertical-tabs__link
-    description: Tab link or button element
-    purpose: Clickable element that activates a tab panel
-  - class: slds-vertical-tabs__content
-    description: Container for tab panel content
-    purpose: Holds the content associated with each tab
-  modifiers: []
-  states:
-  - class: slds-is-active
-    description: Active state for the current tab
-    trigger: When a tab is selected and its panel is visible
-  - class: slds-is-disabled
-    description: Disabled state for a tab
-    trigger: When a tab is not interactive
-variants:
-- name: Base
-  description: Standard vertical tabs navigation
-  classes:
-  - slds-vertical-tabs
-  usage_context: Default vertical tabs implementation
-  differences: Vertical navigation with tab panels
-lightning_component:
-  name: lightning-tabset
-  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-tabset
-  mapping_notes: Lightning tabset can be configured for vertical orientation
-accessibility:
-  keyboard_support:
-  - Tab to navigate to tab list
-  - Arrow keys (Up/Down) to navigate between tabs
-  - Enter or Space to activate a tab
-  - Home/End to jump to first/last tab
-  screen_reader:
-  - Tab list role announced
-  - Active tab state announced
-  - Tab panel content associated and announced
-  - Disabled tab state announced
-  aria_attributes:
-  - role='tablist' on navigation container
-  - role='tab' on tab links
-  - role='tabpanel' on content panels
-  - aria-selected on active tab (true/false)
-  - aria-controls linking tab to panel
-  - aria-labelledby linking panel to tab
-  - aria-disabled on disabled tabs
-  - tabindex='0' on active tab, '-1' on others
-usage_guidelines:
-  when_to_use:
-  - When you have multiple content sections to organize
-  - For settings pages or configuration interfaces
-  - When horizontal space is limited but vertical space is available
-  - For side navigation patterns
-  - When content sections are related but distinct
-  when_not_to_use:
-  - When horizontal tabs work better for the layout
-  - For primary navigation (use global navigation)
-  - When only 2-3 sections exist (consider accordion)
-  - In very narrow viewports
-  best_practices:
-  - Keep tab labels short and descriptive
-  - Provide clear visual indication of active tab
-  - Ensure adequate spacing between tabs
-  - Support keyboard navigation fully
-  - Maintain tab state during navigation
-  - Use icons to enhance tab meaning when helpful
-  common_mistakes:
-  - Not implementing proper ARIA tab patterns
-  - Missing keyboard navigation
-  - Inadequate visual feedback for active state
-  - Too many tabs making navigation difficult
-  - Not maintaining tab state
-code_examples:
-- title: Basic Vertical Tabs
-  code: "<div class=\"slds-vertical-tabs\">\n      <ul class=\"slds-vertical-tabs__nav\" role=\"tablist\">\n        <li class=\"\
-    slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a class=\"slds-vertical-tabs__link\" href=\"#\" role=\"\
-    tab\" aria-selected=\"true\" aria-controls=\"tab-panel-1\" tabindex=\"0\">\n            Tab One\n          </a>\n    \
-    \    </li>\n        <li class=\"slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a class=\"slds-vertical-tabs__link\"\
-    \ href=\"#\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-panel-2\" tabindex=\"-1\">\n            Tab Two\n\
-    \          </a>\n        </li>\n        <li class=\"slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a\
-    \ class=\"slds-vertical-tabs__link\" href=\"#\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-panel-3\" tabindex=\"\
-    -1\">\n            Tab Three\n          </a>\n        </li>\n      </ul>\n      <div class=\"slds-vertical-tabs__content\"\
-    >\n        <div id=\"tab-panel-1\" class=\"\" role=\"tabpanel\" aria-labelledby=\"tab-1\">\n          <p>Content for Tab\
-    \ One</p>\n        </div>\n        <div id=\"tab-panel-2\" class=\"\" role=\"tabpanel\" aria-labelledby=\"tab-2\" hidden>\n\
-    \          <p>Content for Tab Two</p>\n        </div>\n        <div id=\"tab-panel-3\" class=\"\" role=\"tabpanel\" aria-labelledby=\"\
-    tab-3\" hidden>\n          <p>Content for Tab Three</p>\n        </div>\n      </div>\n      </div>\n"
-- title: Vertical Tabs with Active State
-  code: "<div class=\"slds-vertical-tabs\">\n      <ul class=\"slds-vertical-tabs__nav\" role=\"tablist\">\n        <li class=\"\
-    slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a class=\"slds-vertical-tabs__link slds-is-active\"\
-    \ href=\"#\" role=\"tab\" aria-selected=\"true\" aria-controls=\"active-panel\" tabindex=\"0\">\n            Active Tab\n\
-    \          </a>\n        </li>\n        <li class=\"slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a\
-    \ class=\"slds-vertical-tabs__link\" href=\"#\" role=\"tab\" aria-selected=\"false\" aria-controls=\"inactive-panel\"\
-    \ tabindex=\"-1\">\n            Inactive Tab\n          </a>\n        </li>\n      </ul>\n      <div class=\"slds-vertical-tabs__content\"\
-    >\n        <div id=\"active-panel\" class=\"\" role=\"tabpanel\" aria-labelledby=\"active-tab\">\n          <p>This is\
-    \ the active tab content</p>\n        </div>\n        <div id=\"inactive-panel\" class=\"\" role=\"tabpanel\" aria-labelledby=\"\
-    inactive-tab\" hidden>\n          <p>This tab is inactive</p>\n        </div>\n      </div>\n      </div>\n"
-styling_hooks: []
-dependencies:
-  css_files:
-  - vertical-tabs.css
-  javascript:
-  - Tab activation and panel switching
-  - Keyboard navigation
-  - ARIA state management
-  - Focus management
-  icons: []
-  other_components: []
-related_components:
-- name: Tabs
-  relationship: alternative
-  description: Horizontal tabs navigation
-- name: Scoped Tabs
-  relationship: similar
-  description: Scoped horizontal tabs
-- name: Vertical Navigation
-  relationship: similar
-  description: Vertical navigation menu
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/vertical-tabs/
-  design_guidelines: https://v1.lightningdesignsystem.com/components/vertical-tabs/
-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 with CSS selector annotations. 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/visual-picker.yaml

@@ -1,150 +0,0 @@
-name: Visual Picker
-description: A selection interface that presents options as visual cards or tiles, allowing users to choose from alternatives
-  using images, icons, and descriptive text rather than traditional form controls.
-category: Input
-slds_classes:
-  root: slds-visual-picker
-  elements:
-  - class: slds-visual-picker__figure
-    description: Container for visual content (icon, image)
-    purpose: Holds the primary visual representation
-  - class: slds-visual-picker__body
-    description: Container for text content
-    purpose: Contains title, description, and other text
-  - class: slds-visual-picker__text
-    description: Primary text/title for the option
-    purpose: Main label or title for the visual option
-  - class: slds-visual-picker__icon
-    description: Icon within the visual picker
-    purpose: Visual icon representation
-  modifiers:
-  - class: slds-visual-picker_medium
-    description: Medium-sized visual picker
-    usage: Standard size for most use cases
-  - class: slds-visual-picker_large
-    description: Large-sized visual picker
-    usage: When more visual prominence is needed
-  - class: slds-visual-picker_small
-    description: Small-sized visual picker
-    usage: For compact layouts or secondary options
-  - class: slds-visual-picker_vertical
-    description: Vertical layout orientation
-    usage: When vertical stacking is preferred
-  states:
-  - class: slds-is-selected
-    description: Selected visual picker state
-    trigger: Applied when option is selected
-  - class: slds-has-error
-    description: Error state for visual picker
-    trigger: Applied when validation fails
-variants:
-- name: Base
-  description: Standard visual picker with icon and text
-  classes:
-  - slds-visual-picker
-  usage_context: Default implementation for visual selection
-  differences: Card-like interface with visual and text content
-- name: Coverable Content
-  description: Visual picker with coverable content area
-  classes:
-  - slds-visual-picker
-  usage_context: When content should be covered by selection state
-  differences: Selection state covers the entire content area
-- name: Non-coverable Content
-  description: Visual picker with always-visible content
-  classes:
-  - slds-visual-picker
-  usage_context: When content should remain visible when selected
-  differences: Content remains visible in all states
-lightning_component:
-  name: No direct component
-  url: https://developer.salesforce.com/docs/component-library/overview/components
-  mapping_notes: No direct Lightning Base Component equivalent - can be implemented using lightning-radio-group or lightning-checkbox-group
-    with custom styling
-accessibility:
-  keyboard_support:
-  - Tab navigation between visual picker options
-  - Space to select/deselect options
-  - Arrow keys for radio group navigation
-  - Enter to activate selections
-  screen_reader:
-  - Option content and state announced
-  - Selection changes communicated
-  - Group structure and labels conveyed
-  aria_attributes:
-  - role='radio' or 'checkbox' for input elements
-  - role='radiogroup' or 'group' for containers
-  - aria-checked for selection state
-  - aria-labelledby for option labeling
-  - aria-describedby for additional descriptions
-usage_guidelines:
-  when_to_use:
-  - For visually-driven selection scenarios
-  - When options benefit from visual representation
-  - For product selection or configuration
-  - When traditional form controls feel inadequate
-  when_not_to_use:
-  - For simple text-only options (use radio/checkbox)
-  - When visual content is not meaningful
-  - In data-heavy or technical contexts
-  best_practices:
-  - Use clear, meaningful visual representations
-  - Provide descriptive text alongside visuals
-  - Ensure adequate contrast for selection states
-  - Make the entire card clickable
-  - Group related options logically
-  common_mistakes:
-  - Using unclear or confusing visuals
-  - Making selection areas too small
-  - Poor contrast in selection states
-  - Inconsistent visual picker sizes
-code_examples:
-- title: Basic Visual Picker Radio Group
-  description: Compact visual picker options for space-constrained layouts
-  code: "<fieldset class=\"slds-form-element\">\n      <legend class=\"slds-form-element__legend slds-form-element__label\"\
-    >Choose color</legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-grid slds-wrap slds-grid_pull-padded\"\
-    >\n          <div class=\"slds-p-around_x-small\">\n            <div class=\"slds-visual-picker slds-visual-picker_small\"\
-    >\n              <input type=\"radio\" id=\"color-red\" value=\"red\" name=\"color\" />\n              <label for=\"color-red\"\
-    >\n                <span class=\"slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center\">\n \
-    \                 <span class=\"slds-visual-picker__icon\" style=\"background-color: #e74c3c; width: 2rem; height: 2rem;\
-    \ border-radius: 50%;\"></span>\n                </span>\n                <span class=\"slds-visual-picker__body\">\n\
-    \                  <span class=\"slds-visual-picker__text\">Red</span>\n                </span>\n              </label>\n\
-    \            </div>\n          </div>\n          <div class=\"slds-p-around_x-small\">\n            <div class=\"slds-visual-picker\
-    \ slds-visual-picker_small\">\n              <input type=\"radio\" id=\"color-blue\" value=\"blue\" name=\"color\" />\n\
-    \              <label for=\"color-blue\">\n                <span class=\"slds-visual-picker__figure slds-visual-picker__text\
-    \ slds-align_absolute-center\">\n                  <span class=\"slds-visual-picker__icon\" style=\"background-color:\
-    \ #3498db; width: 2rem; height: 2rem; border-radius: 50%;\"></span>\n                </span>\n                <span class=\"\
-    slds-visual-picker__body\">\n                  <span class=\"slds-visual-picker__text\">Blue</span>\n                </span>\n\
-    \              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n      </fieldset>\n"
-dependencies:
-  css_files:
-  - visual-picker.css
-  - form-element.css
-  - radio.css
-  - checkbox.css
-  javascript:
-  - visual-picker.js
-  icons:
-  - standard-sprite.svg
-  - utility-sprite.svg
-  other_components:
-  - radio
-  - checkbox
-  - form-element
-related_components:
-- name: Radio Group
-  relationship: alternative
-  description: Alternative for single selection scenarios
-- name: Checkbox Group
-  relationship: alternative
-  description: Alternative for multiple selection scenarios
-- name: Cards
-  relationship: similar
-  description: Similar card-based interface concept
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/visual-picker/
-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/welcome-mat.yaml

@@ -1,136 +0,0 @@
-name: Welcome Mat
-description: An introductory overlay that provides onboarding guidance, feature highlights, or welcome messaging for new users,
-  typically displayed as a full-screen or prominent modal experience.
-category: Overlay
-slds_classes:
-  root: slds-welcome-mat
-  elements:
-  - class: slds-welcome-mat__content
-    description: Content area for welcome messaging
-    purpose: Contains the primary welcome content and messaging
-  - class: slds-welcome-mat__tile
-    description: Individual content tile within welcome mat
-    purpose: Represents a single feature or benefit highlight
-  - class: slds-welcome-mat__tile-figure
-    description: Visual area within a welcome mat tile
-    purpose: Contains icon or image for individual tiles
-  - class: slds-welcome-mat__tile-body
-    description: Text content area within a tile
-    purpose: Contains title and description for tiles
-  modifiers:
-  - class: slds-welcome-mat_splash
-    description: Full-screen splash style welcome mat
-    usage: For prominent full-screen welcome experiences
-  states:
-  - class: slds-is-open
-    description: Visible welcome mat state
-    trigger: Applied when welcome mat is displayed
-  - class: slds-is-closed
-    description: Hidden welcome mat state
-    trigger: Applied when welcome mat is dismissed
-variants:
-- name: Base
-  description: Standard welcome mat with content and actions
-  classes:
-  - slds-welcome-mat
-  usage_context: Default implementation for welcome experiences
-  differences: Basic welcome mat with flexible content layout
-- name: Splash
-  description: Full-screen splash welcome mat
-  classes:
-  - slds-welcome-mat
-  - slds-welcome-mat_splash
-  usage_context: For prominent first-time user experiences
-  differences: Full-screen overlay with prominent welcome content
-- name: Modal
-  description: Modal-style welcome mat
-  classes:
-  - slds-welcome-mat
-  usage_context: For focused welcome messaging in modal format
-  differences: Centered modal with welcome content
-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 using custom components or lightning-modal
-    with welcome content
-accessibility:
-  keyboard_support:
-  - Tab navigation through welcome mat content
-  - Enter/Space to activate action buttons
-  - Escape to close if dismissible
-  - Focus management for modal behavior
-  screen_reader:
-  - Welcome mat purpose and content announced
-  - Navigation and action options described
-  - Progress through welcome flow communicated
-  aria_attributes:
-  - role='dialog' for modal welcome mats
-  - aria-modal='true' for overlay behavior
-  - aria-labelledby for welcome mat title
-  - aria-describedby for welcome content
-  - aria-live for dynamic content updates
-usage_guidelines:
-  when_to_use:
-  - For first-time user onboarding
-  - When introducing new features
-  - For welcome messaging and orientation
-  - To highlight key benefits or capabilities
-  when_not_to_use:
-  - For returning user experiences
-  - When users are familiar with the interface
-  - For critical workflow interruptions
-  best_practices:
-  - Keep welcome content concise and valuable
-  - Provide clear next steps or actions
-  - Allow easy dismissal or skipping
-  - Use progressive disclosure for complex onboarding
-  - Test with real users for effectiveness
-  common_mistakes:
-  - Overwhelming users with too much information
-  - Blocking critical functionality
-  - Poor mobile experience
-  - Not allowing users to skip or dismiss
-code_examples:
-- title: Basic Welcome Mat
-  description: Full-screen splash style welcome experience
-  code: "<div class=\"slds-welcome-mat slds-welcome-mat_splash slds-is-open\">\n      <div class=\"\">\n        <div class=\"\
-    slds-welcome-mat__content slds-text-align_center\">\n          <div class=\"slds-m-bottom_large\">\n            <img src=\"\
-    /assets/images/splash-hero.svg\" alt=\"Platform illustration\" style=\"max-width: 300px;\" />\n          </div>\n    \
-    \      <div class=\"slds-m-bottom_large\">\n            <h1 class=\"slds-text-heading_large\">Welcome to Your New Workspace</h1>\n\
-    \            <p class=\"slds-text-body_regular slds-m-top_medium\">\n              Everything you need to manage your\
-    \ projects, collaborate with your team, and achieve your goals.\n            </p>\n          </div>\n          <div class=\"\
-    \">\n            <button class=\"slds-button slds-button_brand slds-button_stretch\">\n              Start Your Journey\n\
-    \            </button>\n            <button class=\"slds-button slds-button_neutral slds-m-top_small\">\n            \
-    \  I'll explore on my own\n            </button>\n          </div>\n        </div>\n      </div>\n      </div>\n"
-dependencies:
-  css_files:
-  - welcome-mat.css
-  - modal.css
-  - button.css
-  - grid.css
-  javascript:
-  - welcome-mat.js
-  icons:
-  - utility-sprite.svg
-  - standard-sprite.svg
-  other_components:
-  - button
-  - modal
-  - grid
-related_components:
-- name: Modal
-  relationship: similar
-  description: Similar overlay concept for different purposes
-- name: Walkthrough
-  relationship: similar
-  description: Similar onboarding concept
-- name: Toast
-  relationship: alternative
-  description: Alternative for brief welcome messages
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/welcome-mat/
-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.'