@salesforce/afv-skills 1.22.0 → 1.24.0

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

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

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

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

@@ -1,94 +0,0 @@
-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.'