lightning-base-components 1.26.3-rc.0-alpha → 1.27.2-alpha

package/README.md

@@ -64,8 +64,8 @@ For more information on how to build a simple web app using the `lightning-base-
 
 ## Limitations
 
--   SLDS styles needs to be globally defined at application level.
--   @lwc/synthetic-shadow is required.
+- SLDS styles needs to be globally defined at application level.
+- @lwc/synthetic-shadow is required.
 
 ## What's Included
 
@@ -74,90 +74,90 @@ web components that can run on the Salesforce platform or outside the Salesforce
 
 The npm package includes these components, along with any utilities and libraries they require.
 
--   lightning-accordion
--   lightning-accordion-section
--   LightningAlert
--   lightning-avatar
--   lightning-badge
--   lightning-breadcrumb
--   lightning-breadcrumbs
--   lightning-button
--   lightning-button-group
--   lightning-button-icon
--   lightning-button-icon-stateful
--   lightning-button-menu
--   lightning-button-stateful
--   lightning-card
--   lightning-carousel
--   lightning-carousel-image
--   lightning-checkbox-group
--   lightning-combobox
--   LightningConfirm
--   lightning-datatable
--   lightning-dual-listbox
--   lightning-dynamic-icon
--   lightning-formatted-address
--   lightning-formatted-date-time
--   lightning-formatted-email
--   lightning-formatted-location
--   lightning-formatted-name
--   lightning-formatted-number
--   lightning-formatted-phone
--   lightning-formatted-rich-text
--   lightning-formatted-text
--   lightning-formatted-time
--   lightning-formatted-url
--   lightning-helptext
--   lightning-icon
--   lightning-input
--   lightning-input-address
--   lightning-input-location
--   lightning-input-name
--   lightning-layout
--   lightning-layout-item
--   lightning-menu-divider
--   lightning-menu-item
--   lightning-menu-subheader
--   LightningModal
--   lightning-modal-header
--   lightning-modal-body
--   lightning-modal-footer
--   lightning-navigation
--   lightning-pill
--   lightning-pill-container
--   lightning-progress-bar
--   lightning-progress-indicator
--   lightning-progress-ring
--   lightning-progress-step
--   LightningPrompt
--   lightning-radio-group
--   lightning-relative-date-time
--   lightning-slider
--   lightning-spinner
--   lightning-tab
--   lightning-tabset
--   lightning-textarea
--   lightning-tile
--   lightning-tree
--   lightning-tree-grid
--   lightning-vertical-navigation
--   lightning-vertical-navigation-item
--   lightning-vertical-navigation-item-badge
--   lightning-vertical-navigation-item-icon
--   lightning-vertical-navigation-overflow
--   lightning-vertical-navigation-section
+- lightning-accordion
+- lightning-accordion-section
+- LightningAlert
+- lightning-avatar
+- lightning-badge
+- lightning-breadcrumb
+- lightning-breadcrumbs
+- lightning-button
+- lightning-button-group
+- lightning-button-icon
+- lightning-button-icon-stateful
+- lightning-button-menu
+- lightning-button-stateful
+- lightning-card
+- lightning-carousel
+- lightning-carousel-image
+- lightning-checkbox-group
+- lightning-combobox
+- LightningConfirm
+- lightning-datatable
+- lightning-dual-listbox
+- lightning-dynamic-icon
+- lightning-formatted-address
+- lightning-formatted-date-time
+- lightning-formatted-email
+- lightning-formatted-location
+- lightning-formatted-name
+- lightning-formatted-number
+- lightning-formatted-phone
+- lightning-formatted-rich-text
+- lightning-formatted-text
+- lightning-formatted-time
+- lightning-formatted-url
+- lightning-helptext
+- lightning-icon
+- lightning-input
+- lightning-input-address
+- lightning-input-location
+- lightning-input-name
+- lightning-layout
+- lightning-layout-item
+- lightning-menu-divider
+- lightning-menu-item
+- lightning-menu-subheader
+- LightningModal
+- lightning-modal-header
+- lightning-modal-body
+- lightning-modal-footer
+- lightning-navigation
+- lightning-pill
+- lightning-pill-container
+- lightning-progress-bar
+- lightning-progress-indicator
+- lightning-progress-ring
+- lightning-progress-step
+- LightningPrompt
+- lightning-radio-group
+- lightning-relative-date-time
+- lightning-slider
+- lightning-spinner
+- lightning-tab
+- lightning-tabset
+- lightning-textarea
+- lightning-tile
+- lightning-tree
+- lightning-tree-grid
+- lightning-vertical-navigation
+- lightning-vertical-navigation-item
+- lightning-vertical-navigation-item-badge
+- lightning-vertical-navigation-item-icon
+- lightning-vertical-navigation-overflow
+- lightning-vertical-navigation-section
 
 Some components in the npm package are not yet supported for use by customers on the Salesforce platform. For example:
 
--   lightning-context
--   lightning-dialog
--   lightning-grouped-combobox
--   lightning-message-dispatcher
--   lightning-picklist
--   lightning-popup
--   lightning-select
--   lightning-stacked-tab
--   lightning-stacked-tabset
+- lightning-context
+- lightning-dialog
+- lightning-grouped-combobox
+- lightning-message-dispatcher
+- lightning-picklist
+- lightning-popup
+- lightning-select
+- lightning-stacked-tab
+- lightning-stacked-tabset
 
 We are not currently accepting feature or bug fix requests for components that work only outside the Salesforce platform. Use these components in your projects outside the Salesforce platform at your own risk. Note that this is not an exhaustive list.
 
@@ -174,14 +174,14 @@ Contrastingly, a component that's supported outside and on the Salesforce platfo
 
 Some base components can run only on the Salesforce platform because they rely on Salesforce data to properly function. These components aren’t included in the package.
 
--   lightning-input-rich-text
--   lightning-file-upload
--   lightning-record-edit-form
--   lightning-record-view-form
--   lightning-record-form
--   lightning-input-field
--   lightning-output-field
--   lightning-map
+- lightning-input-rich-text
+- lightning-file-upload
+- lightning-record-edit-form
+- lightning-record-view-form
+- lightning-record-form
+- lightning-input-field
+- lightning-output-field
+- lightning-map
 
 ## Usage
 

package/external/flagStub.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default true;

package/external/gateStub.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.26.3-rc.0-alpha",
+    "version": "1.27.2-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -22,6 +22,90 @@
                 "name": "assert",
                 "path": "external/assert.js"
             },
+            {
+                "name": "@salesforce/gate/accordionCloseSingleSection.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/assertContext.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/colorIconsMenuItem.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/datatableIconSrc.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/formattedDateTimeDateStyle.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/groupedComboboxVariants.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/inputErrorIcon.ce.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/modalReduceMotionFix.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/bc.256.enableReactiveCarousel",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/recordFormFieldCaching.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/regexCustomElementCheck.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/overlaySldsScopeClass.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/sanitizeURL.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/treeGridCustomTypes.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/treeGridStaticCustomTypes.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/treeItemEndIcon.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/bc.258.enableInputSearchCommitEvent",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/enableInputConstraintPriorityFix.ce.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/primitiveThemeProviderDisabled.bc.ltng",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/gate/bc.258.enableOutputFieldReadOnlyClass",
+                "path": "external/gateStub.js"
+            },
+            {
+                "name": "@salesforce/accessCheck/ComponentAccessibility.orgHasWCAGResizeReflowSC",
+                "path": "external/flagStub.js"
+            },
             {
                 "name": "@salesforce/label/LightningForm.edit",
                 "path": "scopedImports/@salesforce-label-LightningForm.edit.js"
@@ -1338,6 +1422,10 @@
                 "name": "@salesforce/label/LightningPrimitiveColumnSorter.missingValueValidation",
                 "path": "scopedImports/@salesforce-label-LightningPrimitiveColumnSorter.missingValueValidation.js"
             },
+            {
+                "name": "@salesforce/label/LightningPrimitiveColumnSorter.deleteButtonAltText",
+                "path": "scopedImports/@salesforce-label-LightningPrimitiveColumnSorter.deleteButtonAltText.js"
+            },
             {
                 "name": "@salesforce/label/Global_Entity.created_by",
                 "path": "scopedImports/@salesforce-label-Global_Entity.created_by.js"

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -3,4 +3,4 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-export default '254';
+export default '256';

package/scopedImports/@salesforce-label-LightningMultiColumnSortingModal.modalTitle.js

@@ -3,4 +3,4 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-export default 'Sort by Columns';
+export default 'Column Sort';

package/scopedImports/@salesforce-label-LightningPrimitiveColumnSorter.deleteButtonAltText.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default 'Remove column';

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

@@ -220,9 +220,9 @@ This example adds a border and gray background to the accordion content area usi
 </lightning-accordion>
 ```
 
-Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Accordion: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/accordion/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component. 
+Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Accordion: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/accordion/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component.
 
-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. 
+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.
 

package/src/lightning/accordion/accordion-section.slds.css

@@ -1,121 +1,114 @@
 
-
-
-    :host([data-render-mode="shadow"]) .slds-accordion__list-item {
-        border-top-width: var(--slds-c-accordionsection-sizing-border, var(--slds-g-sizing-border-1));
-        border-top-style: solid;
-        border-top-color: var(--slds-c-accordionsection-color-border,  var(--slds-g-color-border-1));
-    }
-
-    :host([data-render-mode="shadow"]) [part="accordion-section"] {
-        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-spacing-3));
-        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-spacing-3));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-spacing-3));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-spacing-3));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-accordion__summary {
-        display: flex;
-        margin-block-start: calc(var(--slds-c-accordionsection-spacing-blockstart,
-        var(--slds-g-sizing-4)) * -1);
-        margin-block-end: calc(var(--slds-c-accordionsection-spacing-blockend,
-        var(--slds-g-sizing-4)) * -1);
-        margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inlinestart,
-        var(--slds-g-sizing-4)) * -1);
-        margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inlineend,
-        var(--slds-g-sizing-4) * -1));
-        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
-        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
-        /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-        background-color: var(--slds-c-accordion-summary-color-background, transparent);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-accordion__summary-heading {
-        --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color, var(--slds-g-color-on-surface-3));
-
-        display: flex;
-        flex-grow: 1;
-        min-width: 0;
-        color: var(--slds-c-accordion-heading-color, var(--slds-g-color-on-surface-3));
-        font-size: var(--slds-c-accordion-heading-font-size, 1em);
-        line-height: var(--slds-c-accordion-heading-font-lineheight, var(--slds-g-font-lineheight-2));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-accordion__summary-heading .slds-button:focus {
-        text-decoration: underline;
-        box-shadow: none;
-    }
-
-    /* Note:
+:host([data-render-mode="shadow"]) .slds-accordion__list-item {
+  border-top-width: var(--slds-c-accordionsection-sizing-border, var(--slds-g-sizing-border-1));
+  border-top-style: solid;
+  border-top-color: var(--slds-c-accordionsection-color-border, var(--slds-g-color-border-1));
+}
+
+:host([data-render-mode="shadow"]) [part='accordion-section'] {
+  padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-spacing-3));
+  padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-spacing-3));
+  padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-spacing-3));
+  padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-spacing-3));
+}
+
+:host([data-render-mode="shadow"]) .slds-accordion__summary {
+  display: flex;
+  margin-block-start: calc(var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4)) * -1);
+  margin-block-end: calc(var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4)) * -1);
+  margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4)) * -1);
+  margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4) * -1));
+  padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
+  padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
+  padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
+  padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+  background-color: var(--slds-c-accordion-summary-color-background, transparent);
+}
+
+:host([data-render-mode="shadow"]) .slds-accordion__summary-heading {
+  --slds-c-icon-color-foreground-default: var(
+    --slds-c-accordion-heading-color,
+    var(--slds-g-color-on-surface-3)
+  );
+
+  display: flex;
+  flex-grow: 1;
+  min-width: 0;
+  color: var(--slds-c-accordion-heading-color, var(--slds-g-color-on-surface-3));
+  font-size: var(--slds-c-accordion-heading-font-size, 1em);
+  line-height: var(--slds-c-accordion-heading-font-lineheight, var(--slds-g-font-lineheight-2));
+}
+
+:host([data-render-mode="shadow"]) .slds-accordion__summary-heading .slds-button:focus {
+  text-decoration: underline;
+  box-shadow: none;
+}
+
+/* Note:
     Currently button is being hard coded so using
     [part="button"] to style button.
     However this should be changed to lightning-button::part(button) once hard coded button gets refactored to lightning-button */
 
-    :host([data-render-mode="shadow"]) [part="button"] {
-        display: inline-flex;
-        flex-grow: 1;
-        align-items: center;
-        justify-content: start;
-        min-width: 0;
-        margin-block-start: calc(
-          var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4)) * -1);
-        margin-block-end: calc(
-        var(--slds-c-accordionsection-spacing-blockend,
-        var(--slds-g-sizing-4)) * -1);
-        margin-inline-end: calc(
-          var(--slds-c-accordionsection-spacing-inlineend,
-          var(--slds-g-sizing-4)) * -1);
-        margin-inline-start: calc(
-          var(--slds-c-accordionsection-spacing-inlinestart,
-          var(--slds-g-sizing-4)) * -1);
-        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
-        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
-    }
-
-    /* Note:
+:host([data-render-mode="shadow"]) [part='button'] {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: start;
+  min-width: 0;
+  margin-block-start: calc(var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4)) * -1);
+  margin-block-end: calc(var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4)) * -1);
+  margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4)) * -1);
+  margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4)) * -1);
+  padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
+  padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
+  padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
+  padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
+}
+
+/* Note:
     Should be changed to lightning-button::part(button)
     if button can be refactored to slds-button
     */
 
-    :host([data-render-mode="shadow"]) [part="button"]:hover,:host([data-render-mode="shadow"]) 
-    [part="button"]:focus {
-        --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color-hover, var(--slds-g-color-brand-base-30));
+:host([data-render-mode="shadow"]) [part='button']:hover,:host([data-render-mode="shadow"]) 
+[part='button']:focus {
+  --slds-c-icon-color-foreground-default: var(
+    --slds-c-accordion-heading-color-hover,
+    var(--slds-g-color-brand-base-30)
+  );
 
-        color: var(--slds-c-accordion-heading-color-hover, var(--slds-g-color-brand-base-30));
-        /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    }
+  color: var(--slds-c-accordion-heading-color-hover, var(--slds-g-color-brand-base-30));
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+}
 
-    /* Note:
+/* Note:
     Media query will need to be worked out properly
     and be replaced with utility classes */
 
-    @media (width >= 64.0625em) {
-        :host([data-render-mode="shadow"]) .slds-accordion__summary-content {
-            max-width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-
-    :host([data-render-mode="shadow"]) .slds-accordion__content {
-        overflow: hidden;
-        visibility: hidden;
-        opacity: 0;
-        height: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__summary {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__content {
-        overflow: visible;
-        visibility: visible;
-        opacity: 1;
-        height: auto;
-    }
+@media (width >= 64.0625em) {
+  :host([data-render-mode="shadow"]) .slds-accordion__summary-content {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+:host([data-render-mode="shadow"]) .slds-accordion__content {
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+  height: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__summary {
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__content {
+  overflow: visible;
+  visibility: visible;
+  opacity: 1;
+  height: auto;
+}

package/src/lightning/accordion/accordion.lbc.native.css

@@ -1,4 +1,3 @@
 @import 'lightning/sldsCommon';
 @import './accordion.slds.css';
 @import './accordion-section.slds.css';
-

package/src/lightning/accordion/accordion.lbc.synthetic.css

@@ -10,4 +10,3 @@
 ::slotted(lightning-accordion-section:first-child) {
     --slds-c-accordionsection-sizing-border: 0;
 }
-

package/src/lightning/accordion/accordion.slds.css

@@ -1,23 +1,23 @@
 
-    /* To Do:
+/* To Do:
         Currently the code below will not work as our script to add data-render-mode into our css will break the css selector.
         We had to add a temporary fix in interop/accordion/accordion.css that
         does the exact same thing to have the styles applied.
         Once our script is fixed (should be addressed in W-12439890) remove the duplicated code found in accordion.css (interop)
     */
 
-    /* Removes first child border top */
+/* Removes first child border top */
 
-    :host([data-render-mode="shadow"]) ::slotted(lightning-accordion-section:first-child) {
-        --slds-c-accordionsection-sizing-border: 0;
-    }
+:host([data-render-mode="shadow"]) ::slotted(lightning-accordion-section:first-child) {
+  --slds-c-accordionsection-sizing-border: 0;
+}
 
-    :host([data-render-mode="shadow"]) [part="accordion"] {
-        /* Note: The following styling hooks are remapped from accordion-section for usability reason.
+:host([data-render-mode="shadow"]) [part='accordion'] {
+  /* Note: The following styling hooks are remapped from accordion-section for usability reason.
         Users will have an option to use spacing styling hooks from both accordion and accordion-section making it
         easier to use our styling hook based on our internal styling hook naming rules */
-        --slds-c-accordionsection-spacing-blockstart: var(--slds-c-accordion-spacing-blockstart);
-        --slds-c-accordionsection-spacing-blockend: var(--slds-c-accordion-spacing-blockend);
-        --slds-c-accordionsection-spacing-inlineend: var(--slds-c-accordion-spacing-inlineend);
-        --slds-c-accordionsection-spacing-inlinestart: var(--slds-c-accordion-spacing-inlinestart);
-    }
+  --slds-c-accordionsection-spacing-blockstart: var(--slds-c-accordion-spacing-blockstart);
+  --slds-c-accordionsection-spacing-blockend: var(--slds-c-accordion-spacing-blockend);
+  --slds-c-accordionsection-spacing-inlineend: var(--slds-c-accordion-spacing-inlineend);
+  --slds-c-accordionsection-spacing-inlinestart: var(--slds-c-accordion-spacing-inlinestart);
+}

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

@@ -76,6 +76,7 @@ This component implements the
 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