@salesforce/afv-skills 1.14.0 → 1.16.0

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

@@ -0,0 +1,138 @@
+name: "Icons"
+description: "Scalable vector graphics that provide visual meaning and enhance user interface elements with consistent symbolic representation."
+category: "Display"
+slds_classes:
+  root: "slds-icon"
+  elements:
+    - class: "slds-icon_container"
+      description: "Container for icon with background"
+      purpose: "Provides background and spacing for icons"
+  modifiers:
+    - class: "slds-icon_xx-small"
+      description: "Extra extra small icon size"
+      usage: "12px icons for very compact spaces"
+    - class: "slds-icon_x-small"
+      description: "Extra small icon size"
+      usage: "16px icons for compact elements"
+    - class: "slds-icon_small"
+      description: "Small icon size"
+      usage: "20px icons for small components"
+    - class: "slds-icon_large"
+      description: "Large icon size"
+      usage: "32px icons for prominent display"
+    - class: "slds-icon-text-default"
+      description: "Default icon color"
+      usage: "Standard text color for icons"
+    - class: "slds-icon-text-light"
+      description: "Light icon color"
+      usage: "Subdued icon appearance"
+    - class: "slds-icon-text-warning"
+      description: "Warning icon color"
+      usage: "Warning state indication"
+    - class: "slds-icon-text-error"
+      description: "Error icon color"
+      usage: "Error state indication"
+    - class: "slds-icon-text-success"
+      description: "Success icon color"
+      usage: "Success state indication"
+  states: []
+variants:
+  - name: "Base"
+    description: "Standard icon implementation"
+    classes:
+      - "slds-icon"
+    usage_context: "Default icon display"
+    differences: "SVG icon with standard styling"
+  - name: "Container"
+    description: "Icon with background container"
+    classes:
+      - "slds-icon_container"
+    usage_context: "Icons needing background emphasis"
+    differences: "Icon with colored background circle"
+lightning_component:
+  name: "lightning-icon"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-icon"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS icon blueprint"
+accessibility:
+  keyboard_support:
+    - "No keyboard interaction (display-only)"
+    - "Focus handled by parent interactive elements"
+  screen_reader:
+    - "Icon meaning conveyed through aria-label or title"
+    - "Decorative icons hidden with aria-hidden='true'"
+    - "Meaningful icons announced with appropriate labels"
+  aria_attributes:
+    - "aria-hidden='true' for decorative icons"
+    - "aria-label for meaningful icons without text"
+    - "title attribute for hover tooltips"
+usage_guidelines:
+  when_to_use:
+    - "To enhance understanding of UI elements"
+    - "For visual consistency and recognition"
+    - "To indicate status or state"
+    - "As visual cues for actions or content types"
+  when_not_to_use:
+    - "As the only way to convey important information"
+    - "When the icon meaning is unclear or ambiguous"
+    - "For purely decorative purposes without semantic value"
+  best_practices:
+    - "Use icons from the SLDS icon library for consistency"
+    - "Choose appropriate size for context"
+    - "Provide text labels or alt text for meaningful icons"
+    - "Use consistent icon styles throughout the interface"
+    - "Test icon recognition with users"
+  common_mistakes:
+    - "Using unclear or ambiguous icons"
+    - "Relying solely on icons without text backup"
+    - "Inconsistent icon sizing"
+    - "Missing accessibility attributes"
+code_examples:
+  - title: "Basic Icon"
+    code: |
+      <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
+            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#user"></use>
+            </svg>
+  - title: "Icon with Container"
+    code: |
+      <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>
+  - title: "Large Warning Icon"
+    code: |
+      <svg class="slds-icon slds-icon_large slds-icon-text-warning" aria-hidden="true">
+            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
+            </svg>
+styling_hooks:
+  - name: "--slds-c-icon-color-foreground-default"
+    default_value: "#706e6b"
+    description: "Default color for icons"
+    category: "color"
+dependencies:
+  css_files:
+    - "icons.css"
+  javascript: []
+  icons:
+    - "utility-sprite.svg"
+    - "standard-sprite.svg"
+    - "action-sprite.svg"
+    - "custom-sprite.svg"
+  other_components: []
+related_components:
+  - name: "Button Icons"
+    relationship: "similar"
+    description: "Icons used within button components"
+  - name: "Avatar"
+    relationship: "similar"
+    description: "Icons often used with avatar fallbacks"
+  - name: "Illustrations"
+    relationship: "similar"
+    description: "Larger, more complex visual graphics"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/icons/"
+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/illustration.yaml

@@ -0,0 +1,205 @@
+name: "Illustration"
+
+description: "Visual illustrations used for empty states, error states, or informational contexts. Provides scalable SVG graphics with consistent styling and themeable colors for strokes and fills."
+
+category: "Display"
+
+slds_classes:
+  root: "slds-illustration"
+  elements:
+    - class: "slds-illustration__svg"
+      description: "SVG container for the illustration graphic"
+      purpose: "Holds the SVG illustration image"
+    - class: "slds-illustration__header"
+      description: "Header text above the illustration"
+      purpose: "Provides title or main message"
+    - class: "slds-illustration__stroke-primary"
+      description: "Primary stroke color for SVG elements"
+      purpose: "Applied to SVG paths for consistent theming"
+    - class: "slds-illustration__stroke-secondary"
+      description: "Secondary stroke color for SVG elements"
+      purpose: "Applied to SVG paths for accent colors"
+    - class: "slds-illustration__fill-primary"
+      description: "Primary fill color for SVG elements"
+      purpose: "Applied to SVG shapes for consistent theming"
+    - class: "slds-illustration__fill-secondary"
+      description: "Secondary fill color for SVG elements"
+      purpose: "Applied to SVG shapes for accent colors"
+  modifiers:
+    - class: "slds-illustration_small"
+      description: "Small size variant (300x200px max)"
+      purpose: "Compact illustration for smaller spaces"
+    - class: "slds-illustration_large"
+      description: "Large size variant (600x400px max)"
+      purpose: "Full-size illustration for prominent empty states"
+  states: []
+
+variants:
+  - name: "Base"
+    description: "Standard illustration with default sizing"
+    classes: ["slds-illustration"]
+    usage_context: "Default illustration implementation"
+    differences: "Responsive illustration with natural SVG sizing"
+  - name: "Small"
+    description: "Compact illustration for smaller contexts"
+    classes: ["slds-illustration", "slds-illustration_small"]
+    usage_context: "Use in panels, cards, or compact layouts"
+    differences: "Maximum 300x200px with reduced spacing"
+  - name: "Large"
+    description: "Full-size illustration for prominent display"
+    classes: ["slds-illustration", "slds-illustration_large"]
+    usage_context: "Use for main content area empty states"
+    differences: "Maximum 600x400px with increased spacing"
+
+lightning_component:
+  name: ""
+  url: "https://developer.salesforce.com/docs/component-library/overview/components"
+  mapping_notes: "No direct Lightning Base Component - implement with custom SVG and styling"
+
+accessibility:
+  keyboard_support:
+    - "Illustrations are typically non-interactive"
+  screen_reader:
+    - "Provide descriptive alt text or aria-label"
+    - "Use aria-hidden='true' for decorative illustrations"
+    - "Ensure accompanying text is accessible"
+  aria_attributes:
+    - "role='img' on SVG or wrapper"
+    - "aria-label with description for meaningful illustrations"
+    - "aria-hidden='true' for purely decorative images"
+
+usage_guidelines:
+  when_to_use:
+    - "For empty states (no data, no results, no items)"
+    - "For error or success confirmation screens"
+    - "To communicate system status visually"
+    - "For onboarding or informational screens"
+  when_not_to_use:
+    - "As primary content (use as supporting visual)"
+    - "For critical information without text backup"
+    - "In place of icons for actions"
+    - "When space is extremely limited"
+  best_practices:
+    - "Always pair illustration with descriptive text"
+    - "Use appropriate size variant for context"
+    - "Provide clear messaging about user action or state"
+    - "Ensure illustrations support but don't replace text"
+    - "Use consistent illustration style across application"
+    - "Consider color contrast and visibility"
+  common_mistakes:
+    - "Missing descriptive text or heading"
+    - "Illustrations too large for context"
+    - "Poor color contrast making illustration hard to see"
+    - "Relying solely on illustration without text"
+    - "Using wrong size variant for space available"
+
+code_examples:
+  - title: "Basic Illustration with Empty State"
+    code: |
+      <div class="slds-illustration slds-illustration_small">
+        <svg class="slds-illustration__svg" viewBox="0 0 468 194" aria-hidden="true">
+          <g class="slds-illustration__stroke-primary">
+            <path d="M233.9 87.3l14.6 36.9 39.6 5.8-28.6 27.9 6.8 39.3-35.5-18.6-35.4 18.6 6.7-39.3L174 130l39.6-5.8z"/>
+          </g>
+          <g class="slds-illustration__fill-secondary">
+            <path d="M234 180.5l-22.7-11.9 4.3 25.2 18.4-13.3z"/>
+          </g>
+        </svg>
+        <h3 class="slds-illustration__header">No Items Found</h3>
+        <p class="slds-text-body_regular">Start by creating your first item.</p>
+      </div>
+    description: "Small illustration for empty state with header and description"
+  - title: "Large Illustration with Action"
+    code: |
+      <div class="slds-illustration slds-illustration_large">
+        <svg class="slds-illustration__svg" viewBox="0 0 600 400" aria-hidden="true">
+          <g class="slds-illustration__stroke-primary">
+            <rect x="100" y="100" width="400" height="200" rx="8"/>
+          </g>
+          <g class="slds-illustration__fill-secondary">
+            <circle cx="300" cy="200" r="50"/>
+          </g>
+        </svg>
+        <h3 class="slds-illustration__header">Welcome to Your Dashboard</h3>
+        <p class="slds-text-body_regular">Get started by adding your first widget.</p>
+        <button class="slds-button slds-button_brand">Add Widget</button>
+      </div>
+    description: "Large illustration with header, description, and action button"
+  - title: "Illustration with No Data State"
+    code: |
+      <div class="slds-illustration slds-illustration_small">
+        <svg class="slds-illustration__svg" viewBox="0 0 300 200" aria-hidden="true">
+          <g class="slds-illustration__fill-primary">
+            <path d="M150 50 L250 150 L50 150 Z"/>
+          </g>
+          <g class="slds-illustration__stroke-secondary">
+            <line x1="150" y1="70" x2="150" y2="130" stroke-width="3"/>
+            <line x1="130" y1="150" x2="170" y2="150" stroke-width="3"/>
+          </g>
+        </svg>
+        <div class="slds-text-longform">
+          <h3 class="slds-illustration__header slds-text-heading_medium">
+            No Records to Display
+          </h3>
+          <p class="slds-text-body_regular">
+            When you have records, they'll appear here.
+          </p>
+        </div>
+      </div>
+    description: "Illustration communicating no data available"
+  - title: "Error State Illustration"
+    code: |
+      <div class="slds-illustration slds-illustration_small">
+        <svg class="slds-illustration__svg" viewBox="0 0 300 200" role="img" aria-labelledby="error-title">
+          <title id="error-title">Error occurred</title>
+          <g class="slds-illustration__stroke-primary">
+            <circle cx="150" cy="100" r="40" fill="none" stroke-width="3"/>
+            <line x1="130" y1="80" x2="170" y2="120" stroke-width="3"/>
+            <line x1="170" y1="80" x2="130" y2="120" stroke-width="3"/>
+          </g>
+        </svg>
+        <h3 class="slds-illustration__header">Something Went Wrong</h3>
+        <p class="slds-text-body_regular">
+          We couldn't complete your request. Please try again.
+        </p>
+        <button class="slds-button slds-button_neutral">Try Again</button>
+      </div>
+    description: "Error state illustration with retry action"
+
+styling_hooks:
+  - name: "--slds-g-color-palette-cloud-blue-80"
+    description: "Primary color for illustration strokes and fills"
+    css_property: "stroke, fill"
+  - name: "--slds-g-color-palette-cloud-blue-90"
+    description: "Secondary color for illustration strokes and fills"
+    css_property: "stroke, fill"
+
+dependencies:
+  css_files: ["illustration.css"]
+  javascript: []
+  icons: []
+  other_components: ["button", "text"]
+
+related_components:
+  - name: "Empty State"
+    relationship: "pattern"
+    description: "Complete pattern using illustration"
+  - name: "Icon"
+    relationship: "alternative"
+    description: "Simpler graphic alternative for smaller contexts"
+  - name: "Spinner"
+    relationship: "complementary"
+    description: "Loading state while content loads"
+
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/illustration/"
+
+metadata:
+  version: "1.0.0"
+  last_updated: "2025-11-11"
+  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"
+

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

@@ -0,0 +1,151 @@
+name: "Input"
+
+description: "A fundamental form control that allows users to enter text, numbers, or other data with various input types and validation states."
+
+category: "Input"
+
+slds_classes:
+  root: "slds-input"
+  elements: []
+  modifiers:
+    - class: "slds-input_bare"
+      description: "Input without border styling"
+      usage: "Minimal input appearance for specific contexts"
+    - class: "slds-input_counter"
+      description: "Input with character counter"
+      usage: "Shows character count for length-limited inputs"
+  states:
+    - class: "slds-has-error"
+      description: "Error state styling"
+      trigger: "When input validation fails"
+    - class: "slds-is-disabled"
+      description: "Disabled state styling"
+      trigger: "When input is not interactive"
+    - class: "slds-has-focus"
+      description: "Focus state styling"
+      trigger: "When input has keyboard focus"
+
+variants:
+  - name: "Base"
+    description: "Standard text input"
+    classes: ["slds-input"]
+    usage_context: "Default text input implementation"
+    differences: "Standard input field with border and padding"
+  - name: "Bare"
+    description: "Input without border styling"
+    classes: ["slds-input", "slds-input_bare"]
+    usage_context: "Minimal styling for specific design needs"
+    differences: "Input without visible border or background"
+
+lightning_component:
+  name: "lightning-input"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-input"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS input blueprint with various types"
+
+accessibility:
+  keyboard_support:
+    - "Tab to focus the input"
+    - "Standard text input keyboard interactions"
+    - "Arrow keys for number inputs"
+  screen_reader:
+    - "Label text announced with the input"
+    - "Error messages associated and announced"
+    - "Required state communicated"
+    - "Input type and current value announced"
+  aria_attributes:
+    - "aria-describedby for help text and error messages"
+    - "aria-invalid when validation fails"
+    - "aria-required for required inputs"
+    - "aria-label when no visible label is present"
+
+usage_guidelines:
+  when_to_use:
+    - "For single-line text entry"
+    - "When users need to input data"
+    - "For search functionality"
+    - "In forms and data entry contexts"
+  when_not_to_use:
+    - "For multi-line text (use textarea instead)"
+    - "For selecting from options (use select or combobox)"
+    - "For binary choices (use checkbox or toggle)"
+  best_practices:
+    - "Use appropriate input types (email, tel, number, etc.)"
+    - "Provide clear labels and placeholder text"
+    - "Show validation feedback immediately"
+    - "Use proper form structure and organization"
+    - "Ensure adequate touch target size"
+  common_mistakes:
+    - "Using wrong input type for the data"
+    - "Missing or unclear labels"
+    - "Poor validation feedback"
+    - "Inadequate error messaging"
+
+code_examples:
+  - title: "Basic Text Input"
+    code: |
+      <div class="slds-form-element">
+        <label class="slds-form-element__label" for="text-input-id-1">
+          <abbr class="slds-required" title="required">* </abbr>Text Input Label
+        </label>
+        <div class="slds-form-element__control">
+          <input type="text" id="text-input-id-1" class="slds-input" placeholder="Enter text..." required />
+        </div>
+      </div>
+    description: "Basic text input with label"
+  - title: "Input with Error"
+    code: |
+      <div class="slds-form-element slds-has-error">
+        <label class="slds-form-element__label" for="text-input-error">
+          <abbr class="slds-required" title="required">* </abbr>Text Input Label
+        </label>
+        <div class="slds-form-element__control">
+          <input type="text" id="text-input-error" class="slds-input" aria-describedby="text-input-error-message" required />
+        </div>
+        <div id="text-input-error-message" class="slds-form-element__help">This field is required</div>
+      </div>
+    description: "Input with error state and validation message"
+  - title: "Number Input"
+    code: |
+      <div class="slds-form-element">
+        <label class="slds-form-element__label" for="number-input-id">Number Input Label</label>
+        <div class="slds-form-element__control">
+          <input type="number" id="number-input-id" class="slds-input" placeholder="Enter number..." />
+        </div>
+      </div>
+    description: "Number input with appropriate type"
+
+styling_hooks:
+  - name: "--slds-c-input-color-background"
+    description: "Background color for inputs"
+    category: "color"
+  - name: "--slds-c-input-color-border"
+    description: "Border color for inputs"
+    category: "color"
+  - name: "--slds-c-input-color-border-focus"
+    description: "Border color for focused inputs"
+    category: "color"
+
+dependencies:
+  css_files: ["input.css", "form-element.css"]
+  javascript: []
+  icons: []
+  other_components: ["form-element"]
+
+related_components:
+  - name: "Textarea"
+    relationship: "alternative"
+    description: "For multi-line text input"
+  - name: "Select"
+    relationship: "alternative"
+    description: "For selecting from predefined options"
+  - name: "Combobox"
+    relationship: "alternative"
+    description: "Enhanced input with dropdown options"
+
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/input/"
+
+metadata:
+  version: "1.0.0"
+  last_updated: "2024-12-19"
+  review_status: "complete"

package/skills/applying-slds/metadata/blueprints/components/list-builder.yaml

@@ -0,0 +1,127 @@
+name: List Builder
+description: A component that allows users to build and manage lists by selecting items from one list and adding them to another.
+  Provides drag-and-drop or click-to-move functionality for managing selections.
+category: Complex Components
+slds_classes:
+  root: ''
+  elements: []
+  modifiers: []
+  states: []
+variants:
+- name: Base
+  description: Standard list builder interface
+  classes: []
+  usage_context: Default list builder for managing selections
+  differences: Two-panel interface for moving items between lists
+lightning_component:
+  name: lightning-dual-listbox
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-dual-listbox
+  mapping_notes: lightning-dual-listbox provides similar two-list selection functionality
+accessibility:
+  keyboard_support:
+  - Tab to navigate between lists and controls
+  - Arrow keys to move through list items
+  - Space to select items
+  - Enter to move selected items
+  - Shift+Arrow for multi-select
+  screen_reader:
+  - List roles announced
+  - Selected item count announced
+  - Move operations confirmed
+  - List labels clearly announced
+  aria_attributes:
+  - role='listbox' on list containers
+  - role='option' on list items
+  - aria-label on lists and buttons
+  - aria-selected on selected items
+  - aria-multiselectable on lists allowing multi-select
+usage_guidelines:
+  when_to_use:
+  - For managing permissions or access lists
+  - When users need to build custom collections
+  - For configuring visible fields or columns
+  - When ordering and selection are both needed
+  when_not_to_use:
+  - For simple multi-select (use checkbox list)
+  - When items don't need reordering
+  - For very long lists (consider search/filter)
+  - When drag-and-drop isn't appropriate
+  best_practices:
+  - Provide clear labels for both lists
+  - Show count of items in each list
+  - Support both drag-and-drop and button moves
+  - Allow reordering within destination list
+  - Provide search/filter for long lists
+  - Show visual feedback during operations
+  common_mistakes:
+  - Missing keyboard support
+  - Unclear which list is source vs destination
+  - No way to move multiple items at once
+  - Poor performance with many items
+  - Missing reordering capability
+code_examples:
+- title: Basic List Builder
+  code: "<div class=\"\">\n  <div class=\"slds-grid slds-grid_vertical-align-center\">\n    <div class=\"slds-col slds-size_5-of-12\"\
+    >\n      <div class=\"slds-form-element\">\n        <label class=\"slds-form-element__label\" for=\"available-list\">Available\
+    \ Items</label>\n        <div class=\"slds-form-element__control\">\n          <div class=\"\" role=\"listbox\" aria-label=\"\
+    Available items\" aria-multiselectable=\"true\" id=\"available-list\">\n            <ul class=\"slds-listbox slds-listbox_vertical\"\
+    >\n              <li role=\"presentation\" class=\"\">\n                <div class=\"slds-listbox__option slds-listbox__option_plain\"\
+    \ role=\"option\" aria-selected=\"false\">\n                  <span class=\"slds-truncate\">Item 1</span>\n          \
+    \      </div>\n              </li>\n              <li role=\"presentation\" class=\"\">\n                <div class=\"\
+    slds-listbox__option slds-listbox__option_plain\" role=\"option\" aria-selected=\"false\">\n                  <span class=\"\
+    slds-truncate\">Item 2</span>\n                </div>\n              </li>\n            </ul>\n          </div>\n    \
+    \    </div>\n      </div>\n    </div>\n    <div class=\"slds-col slds-size_2-of-12\">\n      <div class=\"slds-grid slds-grid_vertical\
+    \ slds-grid_align-center\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Move\
+    \ to Selected\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#right\"\
+    ></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Move to Selected</span>\n        </button>\n\
+    \        <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Move to Available\">\n       \
+    \   <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#left\"\
+    ></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Move to Available</span>\n        </button>\n\
+    \      </div>\n    </div>\n    <div class=\"slds-col slds-size_5-of-12\">\n      <div class=\"slds-form-element\">\n \
+    \       <label class=\"slds-form-element__label\" for=\"selected-list\">Selected Items</label>\n        <div class=\"\
+    slds-form-element__control\">\n          <div class=\"\" role=\"listbox\" aria-label=\"Selected items\" aria-multiselectable=\"\
+    true\" id=\"selected-list\">\n            <ul class=\"slds-listbox slds-listbox_vertical\">\n              <li role=\"\
+    presentation\" class=\"\">\n                <div class=\"slds-listbox__option slds-listbox__option_plain\" role=\"option\"\
+    \ aria-selected=\"false\">\n                  <span class=\"slds-truncate\">Item 3</span>\n                </div>\n  \
+    \            </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
+  description: Two-panel list builder with move buttons
+styling_hooks: []
+dependencies:
+  css_files:
+  - list-builder.css
+  - listbox.css
+  - button.css
+  javascript:
+  - Item selection management
+  - Move operations
+  - Drag-and-drop handling
+  - Reordering logic
+  icons:
+  - utility:right
+  - utility:left
+  - utility:up
+  - utility:down
+  other_components:
+  - listbox
+  - button
+  - form-element
+related_components:
+- name: Dual Listbox
+  relationship: alternative
+  description: Lightning component alternative
+- name: Picklist
+  relationship: similar
+  description: Simpler selection pattern
+- name: Dueling Picklist
+  relationship: similar
+  description: SLDS version of dual-listbox pattern
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/list-builder/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-11-11'
+  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