@salesforce/afv-skills 1.14.0 → 1.16.0

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

@@ -0,0 +1,192 @@
+name: Builder Header
+description: A specialized global header component designed for builder and editor interfaces. It provides a fixed header
+  with navigation, branding, and utility actions, along with an optional toolbar for document-level actions.
+category: Layout
+slds_classes:
+  root: slds-builder-header
+  elements:
+  - class: slds-builder-header_container
+    description: Container that fixes the builder header to the top of the viewport
+    purpose: Wrapper element that positions the header at the top of the page
+  - class: slds-builder-header__item
+    description: Direct child item of the builder header
+    purpose: Contains navigation items, branding, or utilities
+  - class: slds-builder-header__item-label
+    description: Non-interactive label inside a header item
+    purpose: Displays text or branding within a header item
+  - class: slds-builder-header__item-action
+    description: Interactive action element inside a header item
+    purpose: Clickable button or link within a header item
+  - class: slds-builder-header__nav
+    description: Container for the navigation region
+    purpose: Holds the navigation list within the header
+  - class: slds-builder-header__nav-list
+    description: List element containing navigation items
+    purpose: Unordered list wrapper for navigation items
+  - class: slds-builder-header__nav-item
+    description: Individual navigation item
+    purpose: List item wrapping each navigation element
+  - class: slds-builder-header__utilities
+    description: Container for utility actions (back, help, etc.)
+    purpose: Holds utility links and actions, typically right-aligned
+  - class: slds-builder-header__utilities-item
+    description: Individual utility item
+    purpose: Wrapper for utility actions like back or help buttons
+  - class: slds-builder-toolbar
+    description: Toolbar region below the builder header
+    purpose: Contains document-level actions and controls
+  - class: slds-builder-toolbar__actions
+    description: Container for toolbar actions
+    purpose: Holds action buttons, typically right-aligned
+  - class: slds-builder-toolbar__item-group
+    description: Group of related toolbar items
+    purpose: Visually groups related buttons or controls
+  modifiers: []
+  states: []
+variants:
+- name: Base
+  description: Standard builder header with navigation
+  classes:
+  - slds-builder-header
+  usage_context: Default builder header for editor interfaces
+  differences: Fixed header with dark background and navigation items
+- name: With Toolbar
+  description: Builder header with toolbar region
+  classes:
+  - slds-builder-header_container
+  - slds-builder-header
+  - slds-builder-toolbar
+  usage_context: When document-level actions need to be accessible
+  differences: Includes a toolbar section below the main header
+lightning_component:
+  name: ''
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component - typically built with lightning-layout and custom styling
+accessibility:
+  keyboard_support:
+  - Tab to navigate between header items
+  - Enter or Space to activate header actions
+  - Arrow keys for navigation within header items
+  screen_reader:
+  - Header landmark announced
+  - Navigation landmark announced
+  - Action labels announced
+  - Current navigation state indicated
+  aria_attributes:
+  - role='banner' on header element
+  - role='navigation' on nav container
+  - aria-label on navigation regions
+  - aria-current for active navigation items
+usage_guidelines:
+  when_to_use:
+  - For builder, editor, or creation interfaces
+  - When consistent global navigation is needed
+  - For applications with document-level actions
+  - In complex editing workflows
+  when_not_to_use:
+  - For standard application navigation (use global-header)
+  - In simple viewing interfaces
+  - When header needs to scroll with content
+  - For mobile-first experiences
+  best_practices:
+  - Keep navigation items concise and clear
+  - Place most important actions in visible areas
+  - Use consistent iconography and labeling
+  - Ensure adequate touch targets for mobile
+  - Group related toolbar actions together
+  - Maintain proper contrast on dark background
+  common_mistakes:
+  - Overcrowding the header with too many items
+  - Inconsistent spacing between elements
+  - Poor color contrast on background
+  - Missing keyboard navigation support
+  - Not indicating current/active state
+code_examples:
+- title: Basic Builder Header
+  code: "<div class=\"slds-builder-header_container\">\n  <header class=\"slds-builder-header\">\n    <div class=\"slds-builder-header__item\"\
+    >\n      <div class=\"slds-builder-header__item-label\">\n        <span class=\"\" title=\"Salesforce\">\n          <svg\
+    \ class=\"slds-icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/logo-sprite/svg/symbols.svg#salesforce\"\
+    ></use>\n          </svg>\n        </span>\n      </div>\n    </div>\n    <nav class=\"slds-builder-header__item slds-builder-header__nav\"\
+    \ role=\"navigation\" aria-label=\"Primary\">\n      <ul class=\"slds-builder-header__nav-list\">\n        <li class=\"\
+    slds-builder-header__nav-item\">\n          <a href=\"#\" class=\"slds-builder-header__item-action\">Setup</a>\n     \
+    \   </li>\n        <li class=\"slds-builder-header__nav-item\">\n          <a href=\"#\" class=\"slds-builder-header__item-action\"\
+    \ aria-current=\"page\">Editor</a>\n        </li>\n      </ul>\n    </nav>\n    <div class=\"slds-builder-header__item\
+    \ slds-builder-header__utilities\">\n      <div class=\"slds-builder-header__utilities-item\">\n        <a href=\"#\"\
+    \ class=\"slds-builder-header__item-action\">Back</a>\n      </div>\n      <div class=\"slds-builder-header__utilities-item\"\
+    >\n        <a href=\"#\" class=\"slds-builder-header__item-action\">Help</a>\n      </div>\n    </div>\n  </header>\n\
+    </div>\n"
+  description: Basic builder header with branding, navigation, and utilities
+- title: Builder Header with Toolbar
+  code: "<div class=\"slds-builder-header_container\">\n  <header class=\"slds-builder-header\">\n    <div class=\"slds-builder-header__item\"\
+    >\n      <div class=\"slds-builder-header__item-label\">\n        <span>Page Builder</span>\n      </div>\n    </div>\n\
+    \    <nav class=\"slds-builder-header__item slds-builder-header__nav\" role=\"navigation\" aria-label=\"Primary\">\n \
+    \     <ul class=\"slds-builder-header__nav-list\">\n        <li class=\"slds-builder-header__nav-item\">\n          <a\
+    \ href=\"#\" class=\"slds-builder-header__item-action\">Properties</a>\n        </li>\n        <li class=\"slds-builder-header__nav-item\"\
+    >\n          <a href=\"#\" class=\"slds-builder-header__item-action\" aria-current=\"page\">Content</a>\n        </li>\n\
+    \      </ul>\n    </nav>\n    <div class=\"slds-builder-header__item slds-builder-header__utilities\">\n      <div class=\"\
+    slds-builder-header__utilities-item\">\n        <button class=\"slds-button slds-button_neutral slds-builder-header__item-action\"\
+    >Cancel</button>\n      </div>\n      <div class=\"slds-builder-header__utilities-item\">\n        <button class=\"slds-button\
+    \ slds-button_brand slds-builder-header__item-action\">Save</button>\n      </div>\n    </div>\n  </header>\n  <div class=\"\
+    slds-builder-toolbar\">\n    <div class=\"slds-builder-toolbar__item-group\">\n      <button class=\"slds-button slds-button_icon\
+    \ slds-button_icon-border\" title=\"Undo\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n        \
+    \  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#undo\"></use>\n        </svg>\n        <span class=\"\
+    slds-assistive-text\">Undo</span>\n      </button>\n      <button class=\"slds-button slds-button_icon slds-button_icon-border\"\
+    \ title=\"Redo\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#redo\"\
+    ></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Redo</span>\n      </button>\n    </div>\n    <div\
+    \ class=\"slds-builder-toolbar__actions\">\n      <div class=\"slds-builder-toolbar__item-group\">\n        <button class=\"\
+    slds-button slds-button_icon slds-button_icon-border\" title=\"Preview\">\n          <svg class=\"slds-button__icon\"\
+    \ aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#preview\"></use>\n\
+    \          </svg>\n          <span class=\"slds-assistive-text\">Preview</span>\n        </button>\n      </div>\n   \
+    \ </div>\n  </div>\n</div>\n"
+  description: Builder header with toolbar containing document actions
+styling_hooks:
+- name: --slds-g-color-brand-base-20
+  description: Background color of the builder header
+  css_property: background
+- name: --slds-g-color-neutral-base-100
+  description: Text color in the builder header
+  css_property: color
+- name: --slds-g-color-brand-base-10
+  description: Border color between header items
+  css_property: border-color
+- name: --slds-g-shadow-inset-inverse-focus-1
+  description: Focus shadow for header actions
+  css_property: box-shadow
+- name: --slds-g-color-border-base-1
+  description: Toolbar border color
+  css_property: border-color
+dependencies:
+  css_files:
+  - builder-header.css
+  - button.css
+  javascript:
+  - Navigation state management
+  - Active item highlighting
+  icons:
+  - utility:undo
+  - utility:redo
+  - utility:preview
+  - logo:salesforce
+  other_components:
+  - button
+  - icon
+related_components:
+- name: Global Header
+  relationship: alternative
+  description: Standard application header for non-builder interfaces
+- name: Page Header
+  relationship: related
+  description: Header for individual pages, not globally fixed
+- name: Docked Utility Bar
+  relationship: complementary
+  description: Can be used alongside builder header for utilities
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/builder-header/
+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/button-groups.yaml

@@ -0,0 +1,82 @@
+name: "Button Groups"
+description: "A collection of related buttons grouped together, maintaining consistent spacing and visual hierarchy while providing clear action choices."
+category: "Actions"
+slds_classes:
+  root: "slds-button-group"
+  elements: []
+  modifiers: []
+  states: []
+variants:
+  - name: "Base"
+    description: "Standard button group with consistent spacing"
+    classes:
+      - "slds-button-group"
+    usage_context: "Default implementation for related action grouping"
+    differences: "Horizontal layout with proper button spacing"
+lightning_component:
+  name: "lightning-button-group"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-button-group"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS button group blueprint"
+accessibility:
+  keyboard_support:
+    - "Tab navigation through individual buttons"
+    - "Enter/Space to activate buttons"
+    - "Arrow keys for group navigation when appropriate"
+  screen_reader:
+    - "Group structure conveyed through list semantics"
+    - "Individual button labels announced"
+    - "Button relationships communicated"
+  aria_attributes:
+    - "role='group' with descriptive aria-label"
+    - "role='list' for button container"
+    - "role='listitem' for individual button wrappers"
+usage_guidelines:
+  when_to_use:
+    - "For related actions that should be grouped together"
+    - "When you need consistent button spacing"
+    - "For toolbar-style interfaces"
+    - "When actions are conceptually related but distinct"
+  when_not_to_use:
+    - "For single actions (use individual buttons)"
+    - "When actions are unrelated"
+    - "For navigation (use navigation components instead)"
+  best_practices:
+    - "Group conceptually related actions together"
+    - "Maintain consistent button styling within groups"
+    - "Order buttons by importance or frequency of use"
+    - "Provide clear, action-oriented button labels"
+  common_mistakes:
+    - "Grouping unrelated actions together"
+    - "Using inconsistent button styles within a group"
+    - "Creating overly large button groups"
+code_examples:
+  - title: "Basic Button Group"
+    description: "Basic button group with cancel and save actions"
+    code: |
+      <div class="slds-button-group" role="group" aria-label="Form actions">
+            <button class="slds-button slds-button_neutral">Cancel</button>
+            <button class="slds-button slds-button_brand">Save</button>
+            </div>
+styling_hooks: []
+dependencies:
+  css_files:
+    - "button-group.css"
+    - "button.css"
+  javascript: []
+  icons: []
+  other_components:
+    - "button"
+related_components:
+  - name: "Button"
+    relationship: "depends-on"
+    description: "Individual buttons that make up the group"
+  - name: "Button Icons"
+    relationship: "depends-on"
+    description: "Icon buttons can be used within groups"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/button-groups/"
+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/button-icons.yaml

@@ -0,0 +1,295 @@
+name: "Button Icons"
+description: "Icon-only buttons that provide visual actions without text labels. Available in multiple variants including transparent, bordered, filled, and inverse styles for use on different backgrounds."
+category: "Actions"
+slds_classes:
+  root: "slds-button_icon"
+  elements:
+    - class: "slds-button__icon"
+      description: "Icon element within the button"
+      purpose: "SVG icon that represents the button action"
+    - class: "slds-button__icon_hint"
+      description: "Hint styling for icon that changes on hover"
+      purpose: "Subdued icon color that becomes more visible on hover"
+    - class: "slds-button__icon_inverse-hint"
+      description: "Hint styling for icon on dark backgrounds"
+      purpose: "Subdued inverse icon color for dark backgrounds"
+  modifiers:
+    - class: "slds-button_icon-container"
+      description: "Container-styled button icon with standard dimensions"
+      purpose: "Default 32x32px button icon container"
+    - class: "slds-button_icon-border"
+      description: "Button icon with transparent background and border"
+      purpose: "Bordered button icon for light backgrounds"
+    - class: "slds-button_icon-border-filled"
+      description: "Button icon with filled white background and border"
+      purpose: "Bordered button with solid background"
+    - class: "slds-button_icon-border-inverse"
+      description: "Button icon with border for dark backgrounds"
+      purpose: "Bordered button icon for inverse/dark backgrounds"
+    - class: "slds-button_icon-inverse"
+      description: "Bare button icon for dark backgrounds"
+      purpose: "Button icon without border for dark backgrounds"
+    - class: "slds-button_icon-brand"
+      description: "Button icon with brand color background"
+      purpose: "Branded, filled button icon"
+    - class: "slds-button_icon-more"
+      description: "Button icon for overflow menus with borders"
+      purpose: "Typically used for three-dot menu buttons"
+    - class: "slds-button_icon-container-more"
+      description: "Button icon for overflow menus without borders"
+      purpose: "Borderless overflow menu button"
+    - class: "slds-button_icon-error"
+      description: "Error state styling for button icon"
+      purpose: "Indicates error or destructive action"
+    - class: "slds-button_icon-warning"
+      description: "Warning state styling for button icon"
+      purpose: "Indicates caution or warning"
+    - class: "slds-button_icon-current-color"
+      description: "Applies current text color to icon"
+      purpose: "Inherits color from parent context"
+    - class: "slds-button_icon-xx-small"
+      description: "Extra extra small button icon (16x16px)"
+      purpose: "Smallest button icon size"
+    - class: "slds-button_icon-x-small"
+      description: "Extra small button icon (20x20px)"
+      purpose: "Very small button icon size"
+    - class: "slds-button_icon-small"
+      description: "Small button icon (24x24px)"
+      purpose: "Small button icon size"
+    - class: "slds-button_icon-large"
+      description: "Large button icon (48x48px)"
+      purpose: "Large button icon size"
+  states:
+    - class: "slds-is-selected"
+      description: "Selected/active state for button icon"
+      trigger: "When button represents active state"
+variants:
+  - name: "Bare"
+    description: "Icon button with no background or border"
+    classes:
+      - "slds-button_icon"
+    usage_context: "Minimal button style for light backgrounds"
+    differences: "Transparent with icon only, no visual container"
+  - name: "Container"
+    description: "Icon button with container sizing"
+    classes:
+      - "slds-button_icon"
+      - "slds-button_icon-container"
+    usage_context: "Standard icon button with defined boundaries"
+    differences: "32x32px container for consistent sizing"
+  - name: "Border"
+    description: "Icon button with border and transparent background"
+    classes:
+      - "slds-button_icon"
+      - "slds-button_icon-border"
+    usage_context: "When button needs more visual weight"
+    differences: "Border with transparent background"
+  - name: "Border Filled"
+    description: "Icon button with border and filled background"
+    classes:
+      - "slds-button_icon"
+      - "slds-button_icon-border-filled"
+    usage_context: "Maximum visual emphasis for icon button"
+    differences: "Border with solid white background"
+  - name: "Inverse"
+    description: "Icon button for dark backgrounds"
+    classes:
+      - "slds-button_icon"
+      - "slds-button_icon-inverse"
+    usage_context: "Use on dark or colored backgrounds"
+    differences: "Light colored icon for dark backgrounds"
+  - name: "Border Inverse"
+    description: "Bordered icon button for dark backgrounds"
+    classes:
+      - "slds-button_icon"
+      - "slds-button_icon-border-inverse"
+    usage_context: "Bordered button on dark backgrounds"
+    differences: "Border with inverse colors"
+  - name: "Brand"
+    description: "Icon button with brand color background"
+    classes:
+      - "slds-button_icon"
+      - "slds-button_icon-brand"
+    usage_context: "Primary action icon button"
+    differences: "Filled with brand blue background"
+lightning_component:
+  name: "lightning-button-icon"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-button-icon"
+  mapping_notes: "lightning-button-icon provides icon-only buttons with variant support"
+accessibility:
+  keyboard_support:
+    - "Tab to focus button"
+    - "Enter or Space to activate button"
+  screen_reader:
+    - "Button role announced"
+    - "Accessible label must be provided (aria-label or slds-assistive-text)"
+    - "Button state announced (pressed, disabled)"
+  aria_attributes:
+    - "aria-label required for icon-only buttons"
+    - "aria-pressed for toggle buttons"
+    - "aria-disabled for disabled state"
+    - "title attribute for tooltip text"
+usage_guidelines:
+  when_to_use:
+    - "For actions where icon clearly conveys meaning"
+    - "To save space in compact interfaces"
+    - "For common, well-understood actions (edit, delete, close)"
+    - "In toolbars and action bars"
+  when_not_to_use:
+    - "For actions that aren't universally understood"
+    - "When text label would significantly improve clarity"
+    - "As primary call-to-action (use full button instead)"
+    - "For complex or ambiguous actions"
+  best_practices:
+    - "Always provide accessible text via aria-label or assistive text"
+    - "Use consistent icons for same actions throughout app"
+    - "Provide tooltip on hover for additional context"
+    - "Ensure adequate touch target size (minimum 44x44px)"
+    - "Choose appropriate variant for background context"
+    - "Use hint variant for less important actions"
+  common_mistakes:
+    - "Missing accessible text label"
+    - "Using unclear or ambiguous icons"
+    - "Touch targets too small on mobile"
+    - "Wrong variant for background color"
+    - "Inconsistent icon usage across application"
+code_examples:
+  - title: "Basic Icon Button"
+    code: |
+      <button class="slds-button slds-button_icon" aria-label="Settings" title="Settings">
+            <svg class="slds-button__icon" aria-hidden="true">
+              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
+            </svg>
+            </button>
+  - title: "Bordered Icon Button"
+    code: |
+      <button class="slds-button slds-button_icon slds-button_icon-border" aria-label="Edit" title="Edit">
+            <svg class="slds-button__icon" aria-hidden="true">
+              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
+            </svg>
+            <span class="slds-assistive-text">Edit</span>
+            </button>
+  - title: "Filled Bordered Icon Button"
+    code: |
+      <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-label="Search" title="Search">
+            <svg class="slds-button__icon" aria-hidden="true">
+              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
+            </svg>
+            <span class="slds-assistive-text">Search</span>
+            </button>
+  - title: "Brand Icon Button"
+    code: |
+      <button class="slds-button slds-button_icon slds-button_icon-brand" aria-label="Add" title="Add">
+            <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">Add</span>
+            </button>
+  - title: "Inverse Icon Button"
+    code: |
+      <div class="slds-box" style="background: #16325c; padding: 1rem;">
+            <button class="slds-button slds-button_icon slds-button_icon-inverse" aria-label="Close" title="Close">
+              <svg class="slds-button__icon" aria-hidden="true">
+                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+              </svg>
+              <span class="slds-assistive-text">Close</span>
+            </button>
+            </div>
+  - title: "Icon Button with Hint"
+    code: |
+      <div class="slds-hint-parent">
+            <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-label="Help" title="Help">
+              <svg class="slds-button__icon slds-button__icon_hint" aria-hidden="true">
+                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#help"></use>
+              </svg>
+              <span class="slds-assistive-text">Help</span>
+            </button>
+            </div>
+  - title: "Size Variants"
+    code: |
+      <div class="slds-grid slds-grid_vertical-align-center slds-gutters_small">
+            <div class="slds-col">
+              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-xx-small" aria-label="Extra Extra Small">
+                <svg class="slds-button__icon" aria-hidden="true">
+                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
+                </svg>
+              </button>
+            </div>
+            <div class="slds-col">
+              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small" aria-label="Extra Small">
+                <svg class="slds-button__icon" aria-hidden="true">
+                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
+                </svg>
+              </button>
+            </div>
+            <div class="slds-col">
+              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-small" aria-label="Small">
+                <svg class="slds-button__icon" aria-hidden="true">
+                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
+                </svg>
+              </button>
+            </div>
+            <div class="slds-col">
+              <button class="slds-button slds-button_icon slds-button_icon-border" aria-label="Medium (default)">
+                <svg class="slds-button__icon" aria-hidden="true">
+                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
+                </svg>
+              </button>
+            </div>
+            <div class="slds-col">
+              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-large" aria-label="Large">
+                <svg class="slds-button__icon" aria-hidden="true">
+                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
+                </svg>
+              </button>
+            </div>
+            </div>
+styling_hooks:
+  - name: "--slds-g-color-neutral-base-50"
+    description: "Default icon color"
+    css_property: "color"
+  - name: "--slds-g-color-neutral-base-100"
+    description: "Background color for filled variants"
+    css_property: "background-color"
+  - name: "--slds-g-shadow-outset-focus-1"
+    description: "Focus shadow for buttons"
+    css_property: "box-shadow"
+  - name: "--slds-g-color-error-base-40"
+    description: "Color for error state"
+    css_property: "color"
+  - name: "--slds-g-color-warning-base-50"
+    description: "Color for warning state"
+    css_property: "color"
+dependencies:
+  css_files:
+    - "button-icons.css"
+    - "button.css"
+    - "icon.css"
+  javascript:
+    - "Click handlers"
+    - "Tooltip functionality"
+  icons:
+    - "Various utility icons"
+  other_components:
+    - "icon"
+    - "tooltip"
+related_components:
+  - name: "Button"
+    relationship: "parent"
+    description: "Base button component"
+  - name: "Button Group"
+    relationship: "complementary"
+    description: "Groups multiple button icons together"
+  - name: "Icon"
+    relationship: "contains"
+    description: "Icon element within button"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/button-icons/"
+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."