@salesforce/afv-skills 1.22.0 → 1.24.0

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

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

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

@@ -1,295 +0,0 @@
-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."