@salesforce/afv-skills 1.13.0 → 1.15.0

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

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

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

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