@salesforce/afv-skills 1.14.0 → 1.16.0

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

@@ -0,0 +1,304 @@
+name: "Accordion"
+description: "A vertically stacked list of items where only one item is shown at a time. When a new item is clicked, it expands to reveal its content and the previously open item closes. Each accordion consists of multiple sections with collapsible content areas and clickable headers."
+category: "Layout"
+slds_classes:
+  root: "slds-accordion"
+  elements:
+    - class: "slds-accordion__list-item"
+      description: "Container for each accordion section"
+      purpose: "Wraps individual accordion items"
+    - class: "slds-accordion__section"
+      description: "Individual section within the accordion"
+      purpose: "Contains a single collapsible section with header and content"
+    - class: "slds-accordion__summary"
+      description: "Clickable header area for each accordion section"
+      purpose: "Contains the accordion toggle button and summary content"
+    - class: "slds-accordion__summary-heading"
+      description: "Heading container within the summary"
+      purpose: "Contains the text heading for the accordion section"
+    - class: "slds-accordion__summary-content"
+      description: "Content area within the summary"
+      purpose: "Contains the section title and description"
+    - class: "slds-accordion__summary-action"
+      description: "Action area within the summary"
+      purpose: "Contains buttons or interactive elements in the summary"
+    - class: "slds-accordion__summary-action-icon"
+      description: "Icon for expand/collapse action"
+      purpose: "Visual indicator for section state and interaction"
+    - class: "slds-accordion__content"
+      description: "Collapsible content area of each accordion section"
+      purpose: "Contains the main content that expands/collapses"
+  modifiers:
+    - class: "slds-is-open"
+      description: "Applied to accordion section when expanded"
+      usage: "Toggle on/off to control accordion section state"
+  states:
+    - class: "slds-is-open"
+      description: "Expanded state for accordion sections"
+      trigger: "User interaction with summary button"
+    - class: "slds-is-closed"
+      description: "Collapsed section state"
+      trigger: "Applied when accordion section is collapsed"
+variants:
+  - name: "Base"
+    description: "Standard accordion with expandable sections"
+    classes:
+      - "slds-accordion"
+    usage_context: "Default implementation for collapsible content sections"
+    differences: "Single accordion with multiple collapsible sections"
+lightning_component:
+  name: "lightning-accordion"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS accordion blueprint. Individual sections map to lightning-accordion-section components."
+accessibility:
+  keyboard_support:
+    - "Tab to navigate between accordion sections"
+    - "Enter/Space to expand/collapse sections"
+    - "Arrow keys may be used for section navigation"
+    - "Focus management within expanded content"
+  screen_reader:
+    - "Announces section state (expanded/collapsed)"
+    - "Provides context about accordion content"
+    - "Section purpose and state announced"
+    - "Expansion state changes communicated"
+    - "Content structure properly conveyed"
+  aria_attributes:
+    - "aria-expanded on summary elements"
+    - "aria-controls linking summary to content"
+    - "role='button' on interactive summary elements"
+    - "aria-labelledby for content labeling"
+    - "role='region' for content areas"
+usage_guidelines:
+  when_to_use:
+    - "When you have multiple sections of content that users might not need to see all at once"
+    - "To save vertical space on a page"
+    - "For FAQ sections or help documentation"
+    - "When content can be logically grouped into sections"
+    - "For organizing related content that can be shown/hidden"
+    - "When content hierarchy needs progressive disclosure"
+  when_not_to_use:
+    - "When all content should be visible simultaneously"
+    - "For navigation menus (use navigation components instead)"
+    - "When sections are very small and wouldn't benefit from collapsing"
+    - "For unrelated content groupings"
+  best_practices:
+    - "Use clear, descriptive headings for each section"
+    - "Keep section headings concise"
+    - "Ensure content within sections is meaningful when collapsed"
+    - "Provide visual indicators for expanded/collapsed states"
+    - "Group related content logically"
+    - "Provide meaningful content in each section"
+    - "Consider default expanded/collapsed states"
+    - "Maintain consistent section behavior"
+  common_mistakes:
+    - "Making section headings too vague"
+    - "Overusing accordions where tabbed interfaces would be better"
+    - "Not providing proper ARIA attributes for accessibility"
+    - "Using unclear or generic section titles"
+    - "Putting too much content in individual sections"
+    - "Inconsistent section behavior"
+    - "Poor content organization within sections"
+code_examples:
+  - title: "Basic Accordion"
+    description: "Standard accordion with single section"
+    code: |
+      <div class="slds-accordion">
+            <section class="slds-accordion__list-item">
+              <div class="slds-accordion__summary" id="accordion-summary-01">
+                <h3 class="slds-accordion__summary-heading">
+                  <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="accordion-content-01" aria-expanded="true">
+                    <span class="slds-accordion__summary-content">Accordion summary</span>
+                  </button>
+                </h3>
+              </div>
+              <div class="slds-accordion__content slds-is-open" id="accordion-content-01">
+                <p>Accordion content</p>
+              </div>
+            </section>
+            </div>
+  - title: "Multi-Section Accordion"
+    description: "Complete accordion with multiple expandable sections"
+    code: |
+      <div class="slds-accordion">
+            <section class="slds-accordion__section slds-is-open">
+              <div class="slds-accordion__summary">
+                <h3 class="slds-accordion__summary-heading">
+                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="accordion-details-01" aria-expanded="true">
+                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
+                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
+                    </svg>
+                    <span class="slds-accordion__summary-content">
+                      Getting Started
+                    </span>
+                  </button>
+                </h3>
+              </div>
+              <div class="slds-accordion__content" id="accordion-details-01">
+                <p>This section contains information about getting started with our platform. You'll find step-by-step instructions, helpful tips, and links to additional resources.</p>
+                <ul class="slds-list_dotted">
+                  <li>Create your account</li>
+                  <li>Complete your profile</li>
+                  <li>Explore the dashboard</li>
+                  <li>Take the guided tour</li>
+                </ul>
+              </div>
+            </section>
+            <section class="slds-accordion__section slds-is-closed">
+              <div class="slds-accordion__summary">
+                <h3 class="slds-accordion__summary-heading">
+                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="accordion-details-02" aria-expanded="false">
+                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
+                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
+                    </svg>
+                    <span class="slds-accordion__summary-content">
+                      Advanced Features
+                    </span>
+                  </button>
+                </h3>
+              </div>
+              <div class="slds-accordion__content slds-hide" id="accordion-details-02">
+                <p>Learn about our advanced features and how to use them effectively in your workflow.</p>
+              </div>
+            </section>
+            <section class="slds-accordion__section slds-is-open">
+              <div class="slds-accordion__summary">
+                <h3 class="slds-accordion__summary-heading">
+                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="accordion-details-03" aria-expanded="true">
+                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
+                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
+                    </svg>
+                    <span class="slds-accordion__summary-content">
+                      Account Settings
+                    </span>
+                  </button>
+                </h3>
+              </div>
+              <div class="slds-accordion__content" id="accordion-details-03">
+                <div class="slds-grid slds-wrap">
+                  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+                    <h4 class="slds-text-heading_small slds-m-bottom_small">Profile Information</h4>
+                    <ul class="slds-list_vertical">
+                      <li class="slds-list__item">Update your name and contact details</li>
+                      <li class="slds-list__item">Change your profile picture</li>
+                      <li class="slds-list__item">Manage privacy settings</li>
+                    </ul>
+                  </div>
+                  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+                    <h4 class="slds-text-heading_small slds-m-bottom_small">Security</h4>
+                    <ul class="slds-list_vertical">
+                      <li class="slds-list__item">Change your password</li>
+                      <li class="slds-list__item">Enable two-factor authentication</li>
+                      <li class="slds-list__item">Review login activity</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </section>
+            </div>
+  - title: "FAQ Accordion"
+    description: "Accordion optimized for frequently asked questions"
+    code: |
+      <div class="slds-accordion">
+            <section class="slds-accordion__section slds-is-closed">
+              <div class="slds-accordion__summary">
+                <h3 class="slds-accordion__summary-heading">
+                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="faq-01" aria-expanded="false">
+                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
+                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
+                    </svg>
+                    <span class="slds-accordion__summary-content">
+                      How do I reset my password?
+                    </span>
+                  </button>
+                </h3>
+              </div>
+              <div class="slds-accordion__content slds-hide" id="faq-01">
+                <p>To reset your password:</p>
+                <ol class="slds-list_ordered">
+                  <li>Click the "Forgot Password" link on the login page</li>
+                  <li>Enter your email address</li>
+                  <li>Check your email for reset instructions</li>
+                  <li>Follow the link and create a new password</li>
+                </ol>
+              </div>
+            </section>
+            <section class="slds-accordion__section slds-is-closed">
+              <div class="slds-accordion__summary">
+                <h3 class="slds-accordion__summary-heading">
+                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="faq-02" aria-expanded="false">
+                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
+                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
+                    </svg>
+                    <span class="slds-accordion__summary-content">
+                      Where can I find my billing information?
+                    </span>
+                  </button>
+                </h3>
+              </div>
+              <div class="slds-accordion__content slds-hide" id="faq-02">
+                <p>Your billing information can be found in the Account Settings section under "Billing & Payments". From there you can:</p>
+                <ul class="slds-list_dotted">
+                  <li>View current charges</li>
+                  <li>Download invoices</li>
+                  <li>Update payment methods</li>
+                  <li>Change billing addresses</li>
+                </ul>
+              </div>
+            </section>
+            </div>
+styling_hooks:
+  - name: "--slds-c-accordion-heading-color"
+    description: "Text color for accordion headings"
+    category: "color"
+  - name: "--slds-c-accordion-heading-font-size"
+    description: "Font size for accordion headings"
+    category: "typography"
+  - name: "--slds-c-accordion-section-color-border"
+    description: "Border color for accordion sections"
+    category: "color"
+  - name: "--slds-c-accordion-section-sizing-border"
+    description: "Border width for accordion sections"
+    category: "sizing"
+  - name: "--slds-c-accordion-section-spacing-block-end"
+    description: "Bottom spacing for accordion sections"
+    category: "spacing"
+  - name: "--slds-c-accordion-section-spacing-block-start"
+    description: "Top spacing for accordion sections"
+    category: "spacing"
+  - name: "--slds-c-accordion-section-spacing-inline-end"
+    description: "Right spacing for accordion sections"
+    category: "spacing"
+  - name: "--slds-c-accordion-section-spacing-inline-start"
+    description: "Left spacing for accordion sections"
+    category: "spacing"
+  - name: "--slds-c-accordion-summary-color-background"
+    description: "Background color for accordion summary"
+    category: "color"
+dependencies:
+  css_files:
+    - "accordion.css"
+    - "button.css"
+  javascript:
+    - "accordion.js"
+  icons:
+    - "utility-sprite.svg"
+  other_components:
+    - "button"
+related_components:
+  - name: "Expandable Section"
+    relationship: "similar"
+    description: "Single expandable section, simpler alternative"
+  - name: "Tabs"
+    relationship: "alternative"
+    description: "Alternative for organizing content sections"
+  - name: "Summary Detail"
+    relationship: "similar"
+    description: "Similar progressive disclosure pattern"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/accordion/"
+metadata:
+  version: "2.0.0"
+  last_updated: "2025-11-12"
+  review_status: "complete"
+  merge_notes: "Merged accordion-section.yaml into unified accordion blueprint for SLDS architectural accuracy"
+  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/activity-timeline.yaml

@@ -0,0 +1,92 @@
+name: Activity Timeline
+description: A visual representation of events arranged in chronological order, used to display a sequence of activities or
+  milestones with associated metadata.
+category: Display
+slds_classes:
+  root: ''
+  elements:
+  - class: slds-timeline__date
+    description: Date/time display for timeline item
+    purpose: Shows when the timeline event occurred
+  - class: slds-timeline__actions
+    description: Actions container for timeline item
+    purpose: Contains interactive elements like buttons or links
+  modifiers: []
+  states: []
+variants:
+- name: Base
+  description: Standard activity timeline with chronological events
+  classes: []
+  usage_context: Default implementation for showing activity history
+  differences: Vertical timeline with media objects for each event
+lightning_component:
+  name: No direct component
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component equivalent - SLDS-only pattern
+accessibility:
+  keyboard_support:
+  - Tab navigation through interactive elements
+  - Focus management for embedded actions
+  screen_reader:
+  - Chronological order conveyed through markup structure
+  - Event details properly associated with headings
+  - Time/date information announced with events
+  aria_attributes:
+  - aria-labelledby for timeline item titles
+  - role='list' and role='listitem' for semantic structure
+  - aria-describedby for additional event details
+usage_guidelines:
+  when_to_use:
+  - To display chronological sequence of events or activities
+  - For showing audit trails or activity logs
+  - When temporal relationship between events is important
+  - To provide historical context for records or objects
+  when_not_to_use:
+  - For non-chronological lists (use regular lists instead)
+  - When temporal order is not relevant
+  - For simple status updates (use feeds instead)
+  - When space is extremely constrained
+  best_practices:
+  - Order events chronologically (newest first or oldest first consistently)
+  - Use meaningful icons to categorize different event types
+  - Keep event descriptions concise but informative
+  - Include relevant timestamps
+  - Group related events when appropriate
+  common_mistakes:
+  - Mixing chronological orders inconsistently
+  - Using unclear or non-descriptive event labels
+  - Omitting important temporal information
+  - Making timeline items too dense with information
+code_examples:
+- title: Basic Timeline Item
+  code: "<div class=\"\">\n      <div class=\"\">\n        <span class=\"\">\n          <span class=\"\">\n            <svg\
+    \ class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#email\"\
+    ></use>\n            </svg>\n          </span>\n          <div class=\"\">\n            <h3 class=\"\">Email sent</h3>\n\
+    \            <p class=\"slds-timeline__date\">Today at 2:30 PM</p>\n            <div class=\"\">\n              <p>Follow-up\
+    \ email sent to customer regarding their inquiry.</p>\n            </div>\n          </div>\n        </span>\n      </div>\n\
+    \      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - timeline.css
+  - media-objects.css
+  javascript: []
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - media-objects
+  - icons
+related_components:
+- name: Feeds
+  relationship: alternative
+  description: Alternative for activity streams with less temporal emphasis
+- name: Path
+  relationship: similar
+  description: Similar concept for process progression
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/activity-timeline/
+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/alert.yaml

@@ -0,0 +1,103 @@
+name: Alert
+description: A banner component used to communicate a state that affects the entire application or page, not a specific feature
+  or task.
+category: Feedback
+slds_classes:
+  root: ''
+  elements: []
+  modifiers:
+  - class: slds-alert_warning
+    description: Warning alert variant
+    usage: Use for warnings that need user attention
+  - class: slds-alert_error
+    description: Error alert variant
+    usage: Use for error messages that require immediate attention
+  - class: slds-alert_offline
+    description: Offline state alert variant
+    usage: Use specifically for offline connectivity messages
+  states: []
+variants:
+- name: Base
+  description: Standard alert with different severity levels
+  classes:
+  - slds-alert_warning
+  - slds-alert_error
+  usage_context: Page-level or application-level notifications
+  differences: Different colors and icons based on message type
+lightning_component:
+  name: lightning-alert
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-alert
+  mapping_notes: Direct mapping - Lightning component implements SLDS alert blueprint
+accessibility:
+  keyboard_support:
+  - No specific keyboard interactions required
+  - Focus management handled by parent context
+  screen_reader:
+  - Alert role automatically announced by screen readers
+  - Icon meaning conveyed through appropriate aria-label
+  - Alert text read immediately when displayed
+  aria_attributes:
+  - role='alert' for immediate announcements
+  - aria-label on icons to convey meaning
+  - aria-live='polite' or 'assertive' based on severity
+usage_guidelines:
+  when_to_use:
+  - For system-wide messages that affect the entire application
+  - To communicate global state changes
+  - For critical information that users must be aware of
+  - When the message applies to the entire page or workflow
+  when_not_to_use:
+  - For feature-specific messages (use toast instead)
+  - For field-level validation (use field-level help)
+  - For temporary notifications (use toast instead)
+  - For success confirmations of user actions (use toast)
+  best_practices:
+  - Use appropriate severity levels (info, warning, error)
+  - Keep alert messages concise and actionable
+  - Place alerts at the top of the content area
+  - Provide clear next steps when appropriate
+  - Don't stack multiple alerts unless absolutely necessary
+  common_mistakes:
+  - Overusing alerts for non-critical information
+  - Using wrong alert type for the message content
+  - Making alert messages too long or complex
+  - Not providing actionable information in critical alerts
+code_examples:
+- title: Info Alert
+  code: "<div class=\"\" role=\"alert\">\n      <span class=\"\">\n        <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"\
+    true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#info\"></use>\n        </svg>\n    \
+    \  </span>\n      <span class=\"\">Base System Alert</span>\n      </div>\n"
+- title: Warning Alert
+  code: "<div class=\"slds-alert_warning\" role=\"alert\">\n      <span class=\"\">\n        <svg class=\"slds-icon slds-icon_x-small\"\
+    \ aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#warning\"></use>\n \
+    \       </svg>\n      </span>\n      <span class=\"\">Your session will expire in 10 minutes.</span>\n      </div>\n"
+- title: Error Alert
+  code: "<div class=\"slds-alert_error\" role=\"alert\">\n      <span class=\"\">\n        <svg class=\"slds-icon slds-icon_x-small\"\
+    \ aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#error\"></use>\n   \
+    \     </svg>\n      </span>\n      <span class=\"\">System maintenance is currently in progress.</span>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - alert.css
+  javascript: []
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - icons
+related_components:
+- name: Toast
+  relationship: alternative
+  description: For temporary, action-specific notifications
+- name: Notifications
+  relationship: similar
+  description: Similar notification patterns for different contexts
+- name: Prompt
+  relationship: alternative
+  description: Modal dialogs for critical alerts requiring action
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/alert/
+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/app-launcher.yaml

@@ -0,0 +1,94 @@
+name: App Launcher
+description: A grid-based interface that allows users to discover and navigate to different applications, typically accessed
+  through a waffle menu or launcher button.
+category: Navigation
+slds_classes:
+  root: slds-app-launcher
+  elements:
+  - class: slds-app-launcher__content
+    description: Main content area of the app launcher
+    purpose: Contains the application grid and navigation sections
+  - class: slds-app-launcher__tile
+    description: Individual application tile
+    purpose: Represents a single application with icon and label
+  - class: slds-app-launcher__tile-figure
+    description: Icon container within application tile
+    purpose: Holds the application icon or image
+  - class: slds-app-launcher__tile-body
+    description: Content area within application tile
+    purpose: Contains application name and description
+  modifiers: []
+  states: []
+variants:
+- name: Base
+  description: Standard app launcher with application grid
+  classes:
+  - slds-app-launcher
+  usage_context: Default implementation for application navigation
+  differences: Grid-based layout with application tiles and sections
+lightning_component:
+  name: No direct component
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component equivalent - typically implemented as custom component
+accessibility:
+  keyboard_support:
+  - Tab navigation through application tiles
+  - Enter/Space to activate application tiles
+  - Arrow keys for grid navigation
+  screen_reader:
+  - Application names and descriptions announced
+  - Grid layout conveyed to assistive technologies
+  aria_attributes:
+  - role='grid' for the application layout
+  - role='gridcell' for individual application tiles
+  - aria-label for application tiles
+usage_guidelines:
+  when_to_use:
+  - To provide access to multiple applications or modules
+  - When users need to switch between different tools
+  - For discovery of available applications
+  when_not_to_use:
+  - For small numbers of applications
+  - When applications are contextually related
+  - For single-application interfaces
+  best_practices:
+  - Use meaningful icons for applications
+  - Keep application names concise
+  - Group related applications logically
+  - Provide search for large numbers of apps
+  common_mistakes:
+  - Using unclear icons
+  - Making tiles too small to interact with
+  - Not providing adequate spacing
+code_examples:
+- title: Basic App Launcher
+  description: Basic app launcher with single application tile
+  code: "<div class=\"slds-app-launcher\">\n      <div class=\"\">\n        <h2>App Launcher</h2>\n      </div>\n      <div\
+    \ class=\"slds-app-launcher__content\">\n        <div class=\"slds-app-launcher__tile\">\n          <div class=\"slds-app-launcher__tile-figure\"\
+    >\n            <svg class=\"slds-icon slds-icon_large\">\n              <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#opportunity\"\
+    ></use>\n            </svg>\n          </div>\n          <div class=\"slds-app-launcher__tile-body\">\n            <h4>Sales\
+    \ Cloud</h4>\n          </div>\n        </div>\n      </div>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - app-launcher.css
+  javascript: []
+  icons:
+  - standard-sprite.svg
+  other_components:
+  - icons
+  - grid
+related_components:
+- name: Global Navigation
+  relationship: container
+  description: Often contains the app launcher
+- name: Navigation
+  relationship: alternative
+  description: Alternative navigation patterns
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/app-launcher/
+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.'