lightning-base-components 1.19.9-alpha → 1.19.11-alpha

package/metadata/raptor.json

@@ -642,6 +642,7 @@
     ]
   },
   "commerceApi": {},
+  "commerceChannelsManagementApi": {},
   "commerceConfigurationApi": {},
   "commerceEsfApi": {},
   "commerceExtensionApi": {},
@@ -687,6 +688,24 @@
       }
     ]
   },
+  "conversationToolkitApi": {
+    "minVersion": "60.0",
+    "slotNames": [],
+    "methods": [
+      {
+        "name": "endConversation"
+      },
+      {
+        "name": "getConversationLog"
+      },
+      {
+        "name": "sendTextMessage"
+      },
+      {
+        "name": "setAgentInput"
+      }
+    ]
+  },
   "dataProviderApi": {},
   "datatable": {
     "minVersion": "41.0",
@@ -920,6 +939,7 @@
       }
     ]
   },
+  "einsteinAiGatewayApi": {},
   "einsteinllmApi": {},
   "empApi": {
     "minVersion": "44.0"
@@ -1647,6 +1667,9 @@
   "industriesDocgenApi": {},
   "industriesDocumentmatrixApi": {},
   "industriesEducationApi": {},
+  "industriesEducationPublicApi": {
+    "minVersion": "60.0"
+  },
   "industriesEinsteinAIAcceleratorApi": {},
   "industriesEnergyUtilitiesApi": {},
   "industriesEpcApi": {},
@@ -1674,6 +1697,7 @@
   "industriesRcgTenantmanagementApi": {},
   "industriesReminderApi": {},
   "industriesRuleBuilderApi": {},
+  "industriesSalesAgreementProductApi": {},
   "industriesSalesExcellenceApi": {},
   "industriesSchedulerApi": {},
   "industriesServiceExcellenceApi": {},
@@ -2575,6 +2599,7 @@
       }
     ]
   },
+  "marketingAi4mApi": {},
   "marketingAssetcreationApi": {},
   "marketingCdpApi": {},
   "mediaUtils": {
@@ -2901,6 +2926,9 @@
     "methods": [
       {
         "name": "focusLink"
+      },
+      {
+        "name": "focusRemove"
       }
     ]
   },
@@ -4196,6 +4224,9 @@
     "minVersion": "59.0",
     "slotNames": [],
     "properties": [
+      {
+        "name": "disabled"
+      },
       {
         "name": "displayInfo"
       },
@@ -4653,6 +4684,15 @@
       {
         "name": "activeTabValue"
       },
+      {
+        "name": "headingLabel"
+      },
+      {
+        "name": "headingLevel"
+      },
+      {
+        "name": "headingVisible"
+      },
       {
         "name": "variant"
       }
@@ -4958,6 +4998,7 @@
   "unstable_platformAdminSuccessGuidanceApi": {},
   "unstable_platformInteractionOrchestratorApi": {},
   "unstable_platformScaleCenterApi": {},
+  "unstable_serviceNetworkDataCategoryApi": {},
   "unstable_uiActionsApi": {},
   "unstable_uiAppsApi": {},
   "unstable_uiDuplicatesApi": {},

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "lightning-base-components",
-    "version": "1.19.9-alpha",
+    "version": "1.19.11-alpha",
     "license": "MIT",
     "files": [
         "external",
         "scopedImports",
         "metadata",
-        "src/lightning/*/!(__container__|__perf__|__raptorMocks__|__test__|__tests__)",
+        "src/lightning/",
         "package.json"
     ],
     "engines": {
@@ -1018,6 +1018,10 @@
                 "name": "@salesforce/label/LightningTabs.errorStateAlternativeText",
                 "path": "scopedImports/@salesforce-label-LightningTabs.errorStateAlternativeText.js"
             },
+            {
+                "name": "@salesforce/label/LightningTabs.defaultTabBarAriaLabel",
+                "path": "scopedImports/@salesforce-label-LightningTabs.defaultTabBarAriaLabel.js"
+            },
             {
                 "name": "@salesforce/label/Duration.secondsLater",
                 "path": "scopedImports/@salesforce-label-Duration.secondsLater.js"

package/scopedImports/@salesforce-label-LightningTabs.defaultTabBarAriaLabel.js

@@ -0,0 +1 @@
+export default 'Tabs';

package/src/lightning/accordion/__docs__/accordion.md

@@ -0,0 +1,278 @@
+---
+examples:
+    - name: basic
+      label: Basic Accordion
+      description: Accordion with a pre-selected open section, and a button that programmatically opens another section. By default, only one section can be open at a time. You can close a section by opening another section.
+    - name: conditional
+      label: Accordion with Conditional Section
+      description: Accordion sections can be toggled to be visible or not.
+    - name: multiple
+      label: Accordion with Multiple Open Sections
+      description: Accordion sections can be open or closed without restrictions, programmatically or by clicking the section headers.
+---
+
+A `lightning-accordion` displays vertically stacked sections of content that you can expand and collapse. Click a section's header to expand its content. Users can control how much content is visible at once, and don't need to scroll as much to see the content of a page.
+
+To create an accordion section, nest a `lightning-accordion-section` component within `lightning-accordion`. Each `lightning-accordion-section` can contain HTML markup or Lightning components.
+
+By default, only one section can be open at a time. You can close a section by opening another section. You can configure the accordion to allow multiple sections to be open, and then the sections can be opened and closed by clicking section headers.
+
+You can specify one or multiple active sections. Active sections are expanded when the component loads. The terms "active", "expanded", and "open" are used interchangeably in this documentation.
+
+Lazy loading is not currenty supported. The content you load in inactive sections also impact your page load time.
+
+#### Initializing the Accordion with An Active Section
+
+The first accordion section is expanded by default. To change the default, provide a section name using the `active-section-name` attribute. The section name is case-sensitive.
+
+This example creates a basic accordion with three sections, where section B is expanded by default. Only one accordion section is expanded at a time.
+
+```html
+<template>
+    <lightning-accordion active-section-name="B">
+        <lightning-accordion-section name="A" label="Accordion Title A"
+            >This is the content area for section A</lightning-accordion-section
+        >
+        <lightning-accordion-section name="B" label="Accordion Title B"
+            >This is the content area for section B</lightning-accordion-section
+        >
+        <lightning-accordion-section name="C" label="Accordion Title C"
+            >This is the content area for section C</lightning-accordion-section
+        >
+    </lightning-accordion>
+</template>
+```
+
+If two or more sections use the same name and that name is also specified as the `active-section-name`, the first section with that name is expanded by default.
+
+#### Initializing the Accordion with Multiple Active Sections
+
+To specify multiple expanded sections, include `allow-multiple-sections-open` in your markup and pass in an array of accordion section names to `active-section-name`.
+If you don't pass in a section name, all sections are closed by default.
+
+```html
+<template>
+    <lightning-accordion
+        allow-multiple-sections-open
+        active-section-name={activeSections}
+    >
+        <lightning-accordion-section name="A" label="Accordion Title A">
+            <p>This is the content area for section A.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="B" label="Accordion Title B">
+            <p>This is the content area for section B.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="C" label="Accordion Title C">
+            <p>This is the content area for section C.</p>
+        </lightning-accordion-section>
+    </lightning-accordion>
+</template>
+```
+
+In your JavaScript code, define the sections you want to expand.
+
+```javascript
+import { LightningElement } from 'lwc';
+
+export default class LightningExampleAccordionMultiple extends LightningElement {
+    activeSections = ['A', 'C'];
+}
+```
+
+#### Handling the Section Toggle Event
+
+When the open sections change, use the `onsectiontoggle` handler to find out which sections are active.
+
+This example displays the name of the active section.
+
+```html
+<template>
+    <p>{activeSectionsMessage}</p>
+
+    <lightning-accordion
+        allow-multiple-sections-open
+        onsectiontoggle={handleSectionToggle}
+        active-section-name="A"
+    >
+        <lightning-accordion-section name="A" label="Accordion Title A">
+            <p>This is the content area for section A.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="B" label="Accordion Title B">
+            <p>This is the content area for section B.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="C" label="Accordion Title C">
+            <p>This is the content area for section C.</p>
+        </lightning-accordion-section>
+    </lightning-accordion>
+</template>
+```
+
+Use the `detail.openSections` property to return the active section names.
+
+```javascript
+import { LightningElement } from 'lwc';
+
+export default class DemoAccordionMultiple extends LightningElement {
+    activeSectionsMessage = '';
+
+    handleSectionToggle(event) {
+        const openSections = event.detail.openSections;
+
+        if (openSections.length === 0) {
+            this.activeSectionsMessage = 'All sections are closed';
+        } else {
+            this.activeSectionsMessage =
+                'Open sections: ' + openSections.join(', ');
+        }
+    }
+}
+```
+
+#### Expanding Sections Programmatically
+
+To expand a section using JavaScript, pass in the section name using `active-section-name`.
+
+This example expands section B when the **Expand Section B** button is pressed.
+
+```html
+<template>
+    <lightning-button label="Expand Section B" onclick={handleClick}>
+    </lightning-button>
+    <lightning-accordion
+        active-section-name={section}
+        onsectiontoggle={handleSectionToggle}
+    >
+        <lightning-accordion-section name="A" label="A"
+            >Content A</lightning-accordion-section
+        >
+        <lightning-accordion-section name="B" label="B"
+            >Content B</lightning-accordion-section
+        >
+        <lightning-accordion-section name="C" label="C"
+            >Content C</lightning-accordion-section
+        >
+    </lightning-accordion>
+</template>
+```
+
+The `onclick` handler on the button sets the active section name, which opens the section programmatically.
+
+Set the value for the open section using the `openSections` property in the `onsectiontoggle` handler.
+
+```javascript
+import { LightningElement } from 'lwc';
+
+export default class App extends LightningElement {
+    section = '';
+
+    handleClick(event) {
+        this.section = 'B';
+    }
+
+    handleSectionToggle(event) {
+        this.section = event.detail.openSections;
+    }
+}
+```
+
+To expand multiple sections programmatically, include `allow-multiple-sections-open` in your markup and pass in an array of section names instead.
+
+```javascript
+import { LightningElement } from 'lwc';
+
+export default class App extends LightningElement {
+    section = [];
+
+    handleClick(event) {
+        this.section = ['B', 'C'];
+    }
+
+    handleSectionToggle(event) {
+        this.section = event.detail.openSections;
+    }
+}
+```
+
+#### Nested Accordions
+
+You can nest `lightning-accordion` components inside `lightning-accordion-section` components to create multiple levels in the accordion. The chevron icon is used for all sections and levels.
+
+#### Component Styling
+
+`lightning-accordion` implements the [accordion](https://www.lightningdesignsystem.com/components/accordion) blueprint in the Salesforce Lightning Design System (SLDS).
+
+To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.
+
+This example adds a border and gray background to the accordion content area using SLDS classes.
+
+```html
+<lightning-accordion active-section-name="A">
+    <lightning-accordion-section name="A" label="Accordion Title A">
+        <div class="slds-box slds-theme_shade">
+            <p>This is the content area for section A.</p>
+        </div>
+    </lightning-accordion-section>
+    <!-- More accordion sections here -->
+</lightning-accordion>
+```
+
+To apply custom styling, use the `:host` selector or define a custom class using the `class` attribute.
+
+```html
+<lightning-accordion class="example-accordion" active-section-name="A">
+    <lightning-accordion-section name="A" label="Accordion Title A">
+        <p>This is the content area for section A.</p>
+    </lightning-accordion-section>
+    <!-- More accordion sections here -->
+</lightning-accordion>
+```
+
+Use SLDS styling hooks to customize the component's styles. For example, specify the border color using the `--slds-c-accordion-color-border` custom property.
+
+```css
+.example-accordion {
+    --slds-c-accordion-color-border: orange;
+}
+```
+
+See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/accordion/#Styling-Hooks-Overview) for a list of CSS custom properties.
+
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
+
+To understand how we implemented SLDS in `lightning-accordion`, see the **Source Code** section.
+
+#### Usage Considerations
+
+You can't initialize an accordion with multiple sections using only markup. Pass the array of section names using JavaScript, as described in **Initializing the Accordion with Multiple Active Sections**.
+
+Accordion sections are not lazy loaded. Content in sections that are collapsed initially are available on load in the DOM.
+
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
+
+#### Custom Events
+
+**`sectiontoggle`**
+
+The event fired when an accordion loads with at least one active section or when a section is toggled.
+
+The `sectiontoggle` event returns the following parameter.
+
+| Parameter    | Type   | Description                                                                               |
+| ------------ | ------ | ----------------------------------------------------------------------------------------- |
+| openSections | object | The name of the active section. Returns an array of strings for the active section names. |
+
+The event properties are as follows.
+
+| Property   | Value | Description                                                                                               |
+| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
+| bubbles    | false | This event does not bubble.                                                                               |
+| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
+| composed   | false | This event does not propagate outside the template in which it was dispatched.                            |
+
+#### Source Code
+
+`lightning-accordion` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/accordion/__examples__/basic/basic.html

@@ -0,0 +1,40 @@
+<template>
+    <p class="slds-text-heading_small">{activeSectionMessage}</p>
+
+    <lightning-button onclick={handleSetActiveSectionC} label="Open Section C"></lightning-button>
+
+    <lightning-accordion class="example-accordion"
+                         onsectiontoggle={handleToggleSection}
+                         active-section-name="B">
+        <lightning-accordion-section name="A" label="Accordion Title A">
+            <lightning-button-menu slot="actions"
+                                  alternative-text="Show menu"
+                                  icon-size="x-small"
+                                  menu-alignment="right">
+                <lightning-menu-item value="New" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="Edit" label="Menu Item Two"></lightning-menu-item>
+            </lightning-button-menu>
+            <p>This is the content area for section A.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>The section height expands to fit your content.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="B" label="Accordion Title B">
+            <p>This is the content area for section B.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>The section height expands to fit your content.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="C" label="Accordion Title C">
+            <p>This is the content area for section C.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>The section height expands to fit your content.</p>
+        </lightning-accordion-section>
+    </lightning-accordion>
+</template>

package/src/lightning/accordion/__examples__/basic/basic.js

@@ -0,0 +1,16 @@
+import { LightningElement } from 'lwc';
+
+export default class LightningExampleAccordionBasic extends LightningElement {
+    activeSectionMessage = '';
+
+    handleToggleSection(event) {
+        this.activeSectionMessage =
+            'Open section name:  ' + event.detail.openSections;
+    }
+
+    handleSetActiveSectionC() {
+        const accordion = this.template.querySelector('.example-accordion');
+
+        accordion.activeSectionName = 'C';
+    }
+}

package/src/lightning/accordion/__examples__/conditional/conditional.html

@@ -0,0 +1,31 @@
+<template>
+    <p class="slds-text-heading_small">{activeSectionMessage}</p>
+
+    <lightning-button onclick={handleToggleSectionD} label="Toggle Section D"></lightning-button>
+
+    <lightning-accordion class="example-accordion"
+                         onsectiontoggle={handleToggleSection}
+                         active-section-name="B">
+        <lightning-accordion-section name="A" label="Accordion Title A">
+            <p>This is the content area for section A.</p>
+            <p>Donec vitae tellus egestas, faucibus ipsum ac, imperdiet erat. Nam venenatis non ante at sagittis. Integer vel purus eget nunc semper placerat. Nam tristique quam leo, et posuere enim condimentum quis. Ut sagittis libero id lectus tempor maximus. Nunc ut tincidunt eros, a hendrerit leo. Suspendisse quis fermentum dolor. Nulla euismod consectetur leo, id condimentum nunc consequat quis.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="B" label="Accordion Title B">
+            <p>This is the content area for section B.</p>
+            <p>Nam at elit et justo scelerisque ullamcorper vel a felis. Mauris sit amet lorem sed est sagittis blandit nec ac turpis. Ut a mi id turpis pharetra ornare. Nullam rhoncus feugiat nunc, ac pulvinar felis pulvinar at. Nullam efficitur aliquet justo et ultricies. Maecenas eu felis aliquam, tincidunt elit at, suscipit leo. Duis ut urna nec nibh hendrerit lacinia. Sed non auctor libero. Sed pellentesque tempor mollis.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="C" label="Accordion Title C">
+            <p>This is the content area for section C.</p>
+            <p>Nulla ornare ipsum felis, vel aliquet dui blandit vel. Integer accumsan velit quis mauris pharetra, nec sollicitudin dui eleifend. Cras condimentum odio mi, nec ullamcorper arcu ullamcorper sed. Proin massa arcu, rutrum a ullamcorper nec, hendrerit in sem. Etiam tempus eros ut lorem tincidunt, id condimentum nulla molestie. Morbi hendrerit elit pretium, ultrices neque non, ullamcorper justo. Quisque vel nisi eget eros efficitur semper. Nulla pulvinar venenatis quam vitae efficitur. Nam facilisis sollicitudin quam ac imperdiet.</p>
+        </lightning-accordion-section>
+
+        <template if:true={isDVisible}>
+            <lightning-accordion-section name="D" label="Accordion Title D">
+                <p>This is the content area for section D.</p>
+                <p>Suspendisse est eros, maximus et risus a, luctus bibendum eros. Etiam ultrices tellus vehicula neque ornare, viverra venenatis purus accumsan. Aenean viverra finibus odio, vitae bibendum nisi tincidunt sed. Ut at porta dui. Praesent varius eleifend quam eget gravida. Curabitur maximus, leo sit amet dapibus gravida, mi ligula lacinia turpis, id feugiat tellus urna quis odio. Nullam tristique orci eu magna hendrerit vestibulum. Sed id purus at metus tristique tristique et vitae arcu. Sed molestie odio felis, sit amet lacinia mauris rutrum nec. Morbi semper lacinia tellus bibendum faucibus. Vestibulum eget ornare sapien, eget ultrices orci.</p>
+            </lightning-accordion-section>
+        </template>
+    </lightning-accordion>
+</template>

package/src/lightning/accordion/__examples__/conditional/conditional.js

@@ -0,0 +1,19 @@
+import { LightningElement } from 'lwc';
+
+export default class LightningExampleAccordionConditional extends LightningElement {
+    activeSectionMessage = '';
+    isDVisible = false;
+
+    handleToggleSection(event) {
+        this.activeSectionMessage =
+            'Open section name:  ' + event.detail.openSections;
+    }
+
+    handleToggleSectionD() {
+        this.isDVisible = !this.isDVisible;
+    }
+
+    get isMessageVisible() {
+        return this.activeSectionMessage.length > 0;
+    }
+}

package/src/lightning/accordion/__examples__/multiple/multiple.html

@@ -0,0 +1,22 @@
+<template>
+    <p>{activeSectionsMessage}</p>
+
+    <lightning-accordion allow-multiple-sections-open
+                         onsectiontoggle={handleSectionToggle}
+                         active-section-name={activeSections}>
+        <lightning-accordion-section name="A" label="Accordion Title A">
+            <p>This is the content area for section A.</p>
+            <p>Donec vitae tellus egestas, faucibus ipsum ac, imperdiet erat. Nam venenatis non ante at sagittis. Integer vel purus eget nunc semper placerat. Nam tristique quam leo, et posuere enim condimentum quis. Ut sagittis libero id lectus tempor maximus. Nunc ut tincidunt eros, a hendrerit leo. Suspendisse quis fermentum dolor. Nulla euismod consectetur leo, id condimentum nunc consequat quis.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="B" label="Accordion Title B">
+            <p>This is the content area for section B.</p>
+            <p>Nam at elit et justo scelerisque ullamcorper vel a felis. Mauris sit amet lorem sed est sagittis blandit nec ac turpis. Ut a mi id turpis pharetra ornare. Nullam rhoncus feugiat nunc, ac pulvinar felis pulvinar at. Nullam efficitur aliquet justo et ultricies. Maecenas eu felis aliquam, tincidunt elit at, suscipit leo. Duis ut urna nec nibh hendrerit lacinia. Sed non auctor libero. Sed pellentesque tempor mollis.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="C" label="Accordion Title C">
+            <p>This is the content area for section C.</p>
+            <p>Nulla ornare ipsum felis, vel aliquet dui blandit vel. Integer accumsan velit quis mauris pharetra, nec sollicitudin dui eleifend. Cras condimentum odio mi, nec ullamcorper arcu ullamcorper sed. Proin massa arcu, rutrum a ullamcorper nec, hendrerit in sem. Etiam tempus eros ut lorem tincidunt, id condimentum nulla molestie. Morbi hendrerit elit pretium, ultrices neque non, ullamcorper justo. Quisque vel nisi eget eros efficitur semper. Nulla pulvinar venenatis quam vitae efficitur. Nam facilisis sollicitudin quam ac imperdiet.</p>
+        </lightning-accordion-section>
+    </lightning-accordion>
+</template>

package/src/lightning/accordion/__examples__/multiple/multiple.js

@@ -0,0 +1,17 @@
+import { LightningElement } from 'lwc';
+
+export default class LightningExampleAccordionMultiple extends LightningElement {
+    activeSections = ['A', 'C'];
+    activeSectionsMessage = '';
+
+    handleSectionToggle(event) {
+        const openSections = event.detail.openSections;
+
+        if (openSections.length === 0) {
+            this.activeSectionsMessage = 'All sections are closed';
+        } else {
+            this.activeSectionsMessage =
+                'Open sections: ' + openSections.join(', ');
+        }
+    }
+}

package/src/lightning/accordionSection/__docs__/accordionSection.md

@@ -0,0 +1,97 @@
+---
+examples:
+    - name: basic
+      label: Basic Accordion Section
+      description: Content for an accordion is an accordion-section.
+---
+
+A `lightning-accordion-section` defines the content of an accordion section inside a `lightning-accordion` component.
+Each section can contain HTML markup or Lightning components.
+
+This example creates a basic accordion with three sections, where section B is
+expanded by specifying it with the `active-section-name` attribute in `lightning-accordion`.
+
+```html
+<template>
+    <lightning-accordion active-section-name="B">
+        <lightning-accordion-section name="A" label="Accordion Title A"
+            >This is the content area for section A</lightning-accordion-section
+        >
+        <lightning-accordion-section name="B" label="Accordion Title B"
+            >This is the content area for section B</lightning-accordion-section
+        >
+        <lightning-accordion-section name="C" label="Accordion Title C"
+            >This is the content area for section C</lightning-accordion-section
+        >
+    </lightning-accordion>
+</template>
+```
+
+Use the `label` attribute to provide optional header text for an accordion section. When the header text is too long to display in the viewport, the text is truncated and displayed with an ellipsis on desktop screens. Hover with the mouse to see the full text.
+
+On mobile devices, long header text wraps to multiple lines because hover text isn't available.
+
+To expand or collapse a section, click the toggle button or header text.
+
+#### Adding an Action to a Section
+
+This example creates the same basic accordion with an added `lightning-button-menu` on
+the first section. The button menu is assigned to the `actions` slot which makes it display on the section header.
+
+```html
+<template>
+    <lightning-accordion active-section-name="B">
+        <lightning-accordion-section name="A" label="Accordion Title A">
+            <lightning-button-menu
+                slot="actions"
+                alternative-text="Show menu"
+                menu-alignment="right"
+            >
+                <lightning-menu-item
+                    value="New"
+                    label="Menu Item One"
+                ></lightning-menu-item>
+                <lightning-menu-item
+                    value="Edit"
+                    label="Menu Item Two"
+                ></lightning-menu-item>
+            </lightning-button-menu>
+            <p>This is the content area for section A.</p>
+        </lightning-accordion-section>
+        <lightning-accordion-section name="B" label="Accordion Title B"
+            >This is the content area for section B</lightning-accordion-section
+        >
+        <lightning-accordion-section name="C" label="Accordion Title C"
+            >This is the content area for section C</lightning-accordion-section
+        >
+    </lightning-accordion>
+</template>
+```
+
+#### Component Styling
+
+This component implements the
+[accordion](https://www.lightningdesignsystem.com/components/accordion) blueprint in the Salesforce Lightning Design System (SLDS).
+
+To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.
+
+For more information, see [lightning-accordion](bundle/lightning-accordion/documentation).
+#### Usage Considerations
+
+If two or more sections use the same name and that name is also specified as
+the `active-section-name`, the first section using that name is expanded by default.
+
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
+
+#### Accessibility
+
+The accordion section renders the toggle button and title in a `<button>` element. When a section is expanded, the button
+renders with `aria-expanded="true"`. When a section is collapsed, the button renders with `aria-expanded="false"`.
+
+Additionally, the button uses the `aria-controls` attribute to identify the content that relates to the controlling button on the accordion section.
+
+To expand or collapse a section using the keyboard, press the Tab key to set focus on the toggle button or header text and press Enter.
+
+#### Source Code
+
+`lightning-accordion-section` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.