@salesforce/afv-skills 1.14.0 → 1.16.0

package/skills/applying-slds/metadata/blueprints/components/rich-text-editor.yaml

@@ -0,0 +1,135 @@
+name: Rich Text Editor
+description: A comprehensive text editing interface that provides formatting tools, allowing users to create and edit rich
+  content with styles, links, lists, and other formatting options.
+category: Input
+slds_classes:
+  root: slds-rich-text-editor
+  elements:
+  - class: slds-rich-text-editor__toolbar
+    description: Container for formatting toolbar
+    purpose: Contains all formatting buttons and controls
+  - class: slds-rich-text-editor__textarea
+    description: Main text editing area
+    purpose: Editable content area for rich text input
+  - class: slds-rich-text-editor__output
+    description: Rendered output area
+    purpose: Displays formatted rich text content
+  modifiers: []
+  states:
+  - class: slds-is-active
+    description: Active formatting button state
+    trigger: Applied to currently active formatting options
+  - class: slds-has-focus
+    description: Focused editor state
+    trigger: Applied when editor has keyboard focus
+variants:
+- name: Base
+  description: Standard rich text editor with full toolbar
+  classes:
+  - slds-rich-text-editor
+  usage_context: Default implementation for rich text editing
+  differences: Complete formatting toolbar with all standard options
+- name: Email
+  description: Email-optimized rich text editor
+  classes:
+  - slds-rich-text-editor
+  usage_context: Specifically for email composition and editing
+  differences: Email-specific formatting options and constraints
+- name: Minimal
+  description: Simplified rich text editor with basic formatting
+  classes:
+  - slds-rich-text-editor
+  usage_context: When only basic formatting is needed
+  differences: Reduced toolbar with essential formatting only
+lightning_component:
+  name: lightning-input-rich-text
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-input-rich-text
+  mapping_notes: Direct mapping - Lightning component implements SLDS rich text editor blueprint
+accessibility:
+  keyboard_support:
+  - Tab navigation through toolbar buttons
+  - Enter/Space to activate formatting buttons
+  - Standard text editing shortcuts (Ctrl+B, Ctrl+I, etc.)
+  - Arrow keys for text navigation
+  - Escape to exit formatting modes
+  screen_reader:
+  - Toolbar structure and groups announced
+  - Formatting state changes communicated
+  - Content changes announced appropriately
+  - Rich text content structure conveyed
+  aria_attributes:
+  - role='toolbar' for formatting toolbar
+  - role='group' for toolbar sections
+  - aria-pressed for toggle buttons
+  - aria-label for formatting buttons
+  - aria-describedby for editor instructions
+usage_guidelines:
+  when_to_use:
+  - For content that requires text formatting
+  - When users need to create rich documents
+  - For email composition with formatting
+  - In content management scenarios
+  when_not_to_use:
+  - For simple text input (use textarea)
+  - When formatting is not needed
+  - In constrained mobile interfaces
+  best_practices:
+  - Provide clear formatting button labels
+  - Group related formatting options logically
+  - Support standard keyboard shortcuts
+  - Provide undo/redo functionality
+  - Handle paste operations gracefully
+  common_mistakes:
+  - Overwhelming users with too many options
+  - Poor keyboard accessibility
+  - Inconsistent formatting behavior
+  - Not handling paste from external sources
+code_examples:
+- title: Basic Rich Text Editor
+  description: Rich text editor optimized for email composition
+  code: "<div class=\"slds-rich-text-editor slds-grid slds-grid_vertical\">\n      <div class=\"slds-rich-text-editor__toolbar\"\
+    \ role=\"toolbar\" aria-label=\"Email formatting\">\n        <div class=\"\">\n          <select class=\"slds-select\"\
+    \ aria-label=\"Font family\">\n            <option>Arial</option>\n            <option>Times New Roman</option>\n    \
+    \        <option>Helvetica</option>\n          </select>\n          <select class=\"slds-select\" aria-label=\"Font size\"\
+    >\n            <option>12px</option>\n            <option>14px</option>\n            <option>16px</option>\n         \
+    \   <option>18px</option>\n          </select>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button\
+    \ slds-button_icon slds-button_icon-border slds-is-active\" aria-pressed=\"true\" title=\"Bold\">\n            <svg class=\"\
+    slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#bold\"\
+    ></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Bold</span>\n          </button>\n      \
+    \    <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Text Color\">\n            <svg class=\"\
+    slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#text_color\"\
+    ></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Text Color</span>\n          </button>\n\
+    \        </div>\n      </div>\n      <div class=\"slds-rich-text-editor__textarea\">\n        <div contenteditable=\"\
+    true\" class=\"slds-rich-text-area__content\" aria-label=\"Email content\">\n          <p><strong>Dear Customer,</strong></p>\n\
+    \          <p>Thank you for your inquiry...</p>\n        </div>\n      </div>\n      </div>\n"
+dependencies:
+  css_files:
+  - rich-text-editor.css
+  - button.css
+  - select.css
+  - textarea.css
+  javascript:
+  - rich-text-editor.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - button
+  - select
+  - textarea
+related_components:
+- name: Textarea
+  relationship: alternative
+  description: Alternative for plain text input
+- name: Input
+  relationship: similar
+  description: Similar form input concept
+- name: Combobox
+  relationship: depends-on
+  description: Used for formatting option selection
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/rich-text-editor/
+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/scoped-notifications.yaml

@@ -0,0 +1,188 @@
+name: "Scoped Notifications"
+
+description: "Scoped notifications serve advisory information for the user that is not important enough to justify an alert. It is often presented as a status bar scoped to the container. They are not dismissible."
+
+category: "Feedback"
+
+slds_classes:
+  root: "slds-scoped-notification"
+  elements:
+    - class: "slds-media__figure"
+      description: "Container for the notification icon"
+      purpose: "Holds the utility icon that indicates notification type"
+    - class: "slds-media__body"
+      description: "Container for the notification message content"
+      purpose: "Contains the notification text and any links"
+  modifiers:
+    - class: "slds-scoped-notification_light"
+      description: "Light theme variant for scoped notification"
+      usage: "Use for light background notifications with dark text"
+    - class: "slds-scoped-notification_dark"
+      description: "Dark theme variant for scoped notification"
+      usage: "Use for dark background notifications with light text"
+    - class: "slds-theme_info"
+      description: "Informational theme (defaults to dark)"
+      usage: "For informational messages"
+    - class: "slds-theme_success"
+      description: "Success theme"
+      usage: "For success messages"
+    - class: "slds-theme_warning"
+      description: "Warning theme"
+      usage: "For warning messages"
+    - class: "slds-theme_error"
+      description: "Error theme"
+      usage: "For error messages"
+  states: []
+
+variants:
+  - name: "Light Theme"
+    description: "Light background scoped notification"
+    classes: ["slds-scoped-notification", "slds-scoped-notification_light"]
+    usage_context: "Use on light backgrounds or when dark theme is not appropriate"
+    differences: "Light background with dark text"
+  - name: "Dark Theme"
+    description: "Dark background scoped notification"
+    classes: ["slds-scoped-notification", "slds-scoped-notification_dark"]
+    usage_context: "Default for informational notifications, use for emphasis"
+    differences: "Dark background with light text"
+  - name: "Informational"
+    description: "Informational scoped notification"
+    classes: ["slds-scoped-notification", "slds-theme_info"]
+    usage_context: "For general information messages"
+    differences: "Informational styling, defaults to dark theme"
+  - name: "Success"
+    description: "Success scoped notification"
+    classes: ["slds-scoped-notification", "slds-theme_success"]
+    usage_context: "For success or completion messages"
+    differences: "Success color styling"
+  - name: "Warning"
+    description: "Warning scoped notification"
+    classes: ["slds-scoped-notification", "slds-theme_warning"]
+    usage_context: "For warning messages"
+    differences: "Warning color styling"
+  - name: "Error"
+    description: "Error scoped notification"
+    classes: ["slds-scoped-notification", "slds-theme_error"]
+    usage_context: "For error messages"
+    differences: "Error color styling"
+
+lightning_component:
+  name: ""
+  url: "https://developer.salesforce.com/docs/component-library/overview/components"
+  mapping_notes: "No direct Lightning Base Component - use custom implementation with SLDS classes"
+
+accessibility:
+  keyboard_support:
+    - "Tab to navigate to links within notification"
+    - "Focus visible on links for keyboard users"
+  screen_reader:
+    - "Notification content announced via role='status'"
+    - "Icon type announced (info, success, warning, error)"
+    - "Link text and context announced"
+  aria_attributes:
+    - "role='status' on container for live region announcements"
+    - "aria-label or assistive text on icons"
+    - "Proper link focus indicators"
+
+usage_guidelines:
+  when_to_use:
+    - "For advisory information that doesn't require immediate attention"
+    - "For status updates within a specific container or section"
+    - "For non-critical feedback messages"
+    - "When information should persist (not dismissible)"
+  when_not_to_use:
+    - "For critical errors (use alerts instead)"
+    - "For information requiring immediate attention (use alerts)"
+    - "For dismissible notifications (use toast or alerts)"
+    - "For page-level messages (use page-level alerts)"
+  best_practices:
+    - "Use appropriate theme (light/dark) for context"
+    - "Choose correct type (info/success/warning/error)"
+    - "Keep messages concise and actionable"
+    - "Include icons to reinforce message type"
+    - "Use links for actionable items within notifications"
+    - "Ensure sufficient color contrast"
+    - "Place within relevant container scope"
+  common_mistakes:
+    - "Using for critical errors that need alerts"
+    - "Making notifications dismissible (they're not)"
+    - "Using wrong theme for background context"
+    - "Missing icons for message type"
+    - "Too verbose or unclear messaging"
+
+code_examples:
+  - title: "Informational Scoped Notification (Dark Theme)"
+    code: |
+      <div class="slds-scoped-notification slds-media slds-media_center slds-theme_info" role="status">
+        <div class="slds-media__figure">
+          <svg class="slds-icon slds-icon_small" aria-hidden="true">
+            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
+          </svg>
+        </div>
+        <div class="slds-media__body">
+          <p>This is an informational notification.</p>
+        </div>
+      </div>
+    description: "Informational scoped notification with dark theme (default)"
+  - title: "Success Scoped Notification"
+    code: |
+      <div class="slds-scoped-notification slds-media slds-media_center slds-theme_success" role="status">
+        <div class="slds-media__figure">
+          <svg class="slds-icon slds-icon_small" aria-hidden="true">
+            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
+          </svg>
+        </div>
+        <div class="slds-media__body">
+          <p>Your changes have been saved successfully.</p>
+        </div>
+      </div>
+    description: "Success scoped notification"
+  - title: "Light Theme Scoped Notification"
+    code: |
+      <div class="slds-scoped-notification slds-scoped-notification_light slds-media slds-media_center" role="status">
+        <div class="slds-media__figure">
+          <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
+            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
+          </svg>
+        </div>
+        <div class="slds-media__body">
+          <p>This is a light theme notification. <a href="#">Learn more</a></p>
+        </div>
+      </div>
+    description: "Light theme scoped notification with link"
+
+styling_hooks: []
+
+dependencies:
+  css_files: ["scoped-notifications.css", "media.css", "icons.css"]
+  javascript: []
+  icons:
+    - "utility:info"
+    - "utility:success"
+    - "utility:warning"
+    - "utility:error"
+  other_components: ["media", "icons"]
+
+related_components:
+  - name: "Alert"
+    relationship: "alternative"
+    description: "For critical or dismissible messages"
+  - name: "Toast"
+    relationship: "alternative"
+    description: "For dismissible temporary notifications"
+  - name: "Notifications"
+    relationship: "similar"
+    description: "General notification component"
+
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/scoped-notifications/"
+  design_guidelines: "https://v1.lightningdesignsystem.com/components/scoped-notifications/"
+metadata:
+  version: "1.0.0"
+  last_updated: "2025-01-15"
+  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. Uses role='status' for accessibility."
+

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

@@ -0,0 +1,97 @@
+name: Scoped Tabs
+description: A tabbed interface that provides scoped navigation within a specific context or container, allowing users to
+  switch between related content areas.
+category: Navigation
+slds_classes:
+  root: ''
+  elements: []
+  modifiers: []
+  states:
+  - class: slds-is-active
+    description: Active tab state
+    trigger: Applied to the currently selected tab
+  - class: slds-has-focus
+    description: Focused tab state
+    trigger: Applied when tab receives keyboard focus
+variants:
+- name: Base
+  description: Standard scoped tabs with horizontal navigation
+  classes: []
+  usage_context: Default implementation for scoped content switching
+  differences: Horizontal tab navigation with scoped styling
+lightning_component:
+  name: lightning-tabset
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-tabset
+  mapping_notes: Maps to lightning-tabset with variant='scoped' - provides scoped tab functionality
+accessibility:
+  keyboard_support:
+  - Tab to focus tab navigation
+  - Arrow keys to navigate between tabs
+  - Enter/Space to activate tabs
+  - Tab to move to tab panel content
+  screen_reader:
+  - Tab list structure announced
+  - Active tab clearly identified
+  - Tab panel content associated with tab
+  aria_attributes:
+  - role='tablist' for tab navigation container
+  - role='tab' for individual tab buttons
+  - role='tabpanel' for content areas
+  - aria-selected for active tab state
+  - aria-controls linking tabs to panels
+  - aria-labelledby linking panels to tabs
+usage_guidelines:
+  when_to_use:
+  - For scoped content organization within a container
+  - When content areas are related but distinct
+  - To provide contextual navigation within a section
+  - For secondary navigation within a page
+  when_not_to_use:
+  - For primary page navigation (use regular tabs)
+  - When content areas are unrelated
+  - For single content areas
+  best_practices:
+  - Keep tab labels concise and descriptive
+  - Limit number of tabs to avoid overflow
+  - Ensure tab content is related and contextual
+  - Provide clear visual indication of active tab
+  - Handle overflow gracefully with scrolling or menus
+  common_mistakes:
+  - Using too many tabs causing overflow issues
+  - Making tab labels unclear or ambiguous
+  - Not providing clear active state indication
+  - Using scoped tabs for unrelated content
+code_examples:
+- title: Basic Scoped Tabs
+  description: Scoped tabs with overflow handling for many tabs
+  code: "<div class=\"\">\n      <div class=\"\" role=\"tablist\">\n        <button class=\"slds-is-active\" role=\"tab\"\
+    \ aria-selected=\"true\">\n          Active Tab\n        </button>\n        <button class=\"\" role=\"tab\" aria-selected=\"\
+    false\">\n          Tab Two\n        </button>\n        <button class=\"\" role=\"tab\" aria-selected=\"false\">\n   \
+    \       Tab Three\n        </button>\n        <button class=\"\" role=\"tab\" aria-selected=\"false\">\n          Tab\
+    \ Four\n        </button>\n      </div>\n      </div>\n"
+dependencies:
+  css_files:
+  - scoped-tabs.css
+  - tabs.css
+  javascript:
+  - scoped-tabs.js
+  icons: []
+  other_components:
+  - tabs
+related_components:
+- name: Tabs
+  relationship: variant
+  description: Base tabs component that scoped tabs extends
+- name: Vertical Navigation
+  relationship: alternative
+  description: Alternative navigation pattern for content switching
+- name: Path
+  relationship: similar
+  description: Similar navigation concept for different contexts
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/scoped-tabs/
+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/select.yaml

@@ -0,0 +1,127 @@
+name: "Select"
+
+description: "A form control that presents users with a dropdown list of predefined options, allowing selection of one option from the list."
+
+category: "Input"
+
+slds_classes:
+  root: "slds-select"
+  elements:
+    - class: "slds-select_container"
+      description: "Container wrapper for select element"
+      purpose: "Provides styling wrapper for the select control"
+  modifiers: []
+  states:
+    - class: "slds-has-error"
+      description: "Error state styling"
+      trigger: "When select validation fails"
+    - class: "slds-is-disabled"
+      description: "Disabled state styling"
+      trigger: "When select is not interactive"
+
+variants:
+  - name: "Base"
+    description: "Standard select dropdown"
+    classes: ["slds-select"]
+    usage_context: "Default select implementation for option selection"
+    differences: "Standard dropdown with predefined options"
+
+lightning_component:
+  name: "lightning-select"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-select"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS select blueprint"
+
+accessibility:
+  keyboard_support:
+    - "Tab to focus the select"
+    - "Arrow keys to navigate options"
+    - "Enter/Space to open dropdown"
+    - "First letter to jump to matching options"
+  screen_reader:
+    - "Select purpose and current value announced"
+    - "Option list and current selection communicated"
+    - "Required state indicated when applicable"
+  aria_attributes:
+    - "aria-describedby for help text and error messages"
+    - "aria-invalid when validation fails"
+    - "aria-required for required selects"
+    - "aria-label when no visible label present"
+
+usage_guidelines:
+  when_to_use:
+    - "For selecting one option from a predefined list"
+    - "When you have 4-15 options to choose from"
+    - "For standard form inputs requiring selection"
+    - "When options are well-known and don't require search"
+  when_not_to_use:
+    - "For more than 15 options (use combobox instead)"
+    - "When users need to search or filter (use combobox)"
+    - "For multiple selections (use checkbox group)"
+    - "For binary choices (use radio buttons or toggle)"
+  best_practices:
+    - "Use clear, descriptive option labels"
+    - "Order options logically (alphabetical, frequency, importance)"
+    - "Provide a default selection when appropriate"
+    - "Keep option lists manageable in size"
+    - "Use proper form structure and labeling"
+  common_mistakes:
+    - "Too many options making selection difficult"
+    - "Unclear or ambiguous option labels"
+    - "Poor option ordering"
+    - "Missing default selection when needed"
+
+code_examples:
+  - title: "Basic Select"
+    code: |
+      <div class="slds-form-element">
+        <label class="slds-form-element__label" for="select-01">
+          <abbr class="slds-required" title="required">* </abbr>Select Label
+        </label>
+        <div class="slds-form-element__control">
+          <div class="slds-select_container">
+            <select class="slds-select" id="select-01" required>
+              <option value="">Choose one...</option>
+              <option value="option1">Option One</option>
+              <option value="option2">Option Two</option>
+              <option value="option3">Option Three</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    description: "Basic select with label and options"
+
+styling_hooks:
+  - name: "--slds-c-select-color-background"
+    description: "Background color for select"
+    category: "color"
+  - name: "--slds-c-select-color-border"
+    description: "Border color for select"
+    category: "color"
+  - name: "--slds-c-select-color-border-focus"
+    description: "Border color for focused select"
+    category: "color"
+
+dependencies:
+  css_files: ["select.css", "form-element.css"]
+  javascript: []
+  icons: []
+  other_components: ["form-element"]
+
+related_components:
+  - name: "Combobox"
+    relationship: "alternative"
+    description: "Enhanced select with search and filtering"
+  - name: "Picklist"
+    relationship: "similar"
+    description: "Alternative selection control"
+  - name: "Radio Group"
+    relationship: "alternative"
+    description: "Alternative for fewer, mutually exclusive options"
+
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/select/"
+
+metadata:
+  version: "1.0.0"
+  last_updated: "2024-12-19"
+  review_status: "complete"