lightning-base-components 1.26.4-alpha → 1.27.2-alpha

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

package/src/lightning/accordionSection/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/accordionSection/accordionSection.lbc.native.css

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

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

@@ -8,7 +8,6 @@
    The code below will remove the border coming from the host and keep the border from shadow boundary.
    - Added '!important' as a last resort as user agent style sheet will always win over our own styles.
 */
-:host([data-render-mode="shadow"]) {
+:host([data-render-mode='shadow']) {
     border: none !important;
 }
-

package/src/lightning/accordionSection/button.slds.css

@@ -187,14 +187,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-icon-sizing: 0.875rem;
   --slds-c-icon-color-foreground: currentcolor;
 
-
   --sds-c-button-font-lineheight: var(
     --slds-c-button-neutral-font-lineheight,
     var(--slds-s-button-font-lineheight, 1.875rem)
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)) ;
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -214,7 +213,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     * In all other variants, it is ok to use the previous state as a fallback value.
     */
 
-
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
     --slds-c-button-radius-border-startstart,
@@ -257,7 +255,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-color-background-hover,
     var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
+  --sds-c-button-color-background-focus: var(
+    --slds-c-button-neutral-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
     var(--slds-g-color-surface-container-2)
@@ -280,8 +281,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
-  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(
+    --slds-c-button-neutral-text-color-hover,
+    var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
+  );
+  --sds-c-button-text-color-focus: var(
+    --slds-c-button-neutral-text-color-focus,
+    var(--slds-g-color-accent-3)
+  );
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
     var(--slds-g-color-accent-3)
@@ -293,17 +300,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 /* Overriding primitiveBaseButton */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
-   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 
-   /** 
+  /** 
     * Needed to override 
     * `pointer-event: none` coming from sds
     * that prevent tooltip from showing
    */
-   pointer-events: auto;
-   cursor: default;
+  pointer-events: auto;
+  cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -414,9 +421,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
   --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
@@ -436,7 +452,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * text variant is for button-stateful
 */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -483,7 +499,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='end'] {
   display: inline-flex;
   padding-inline-start: 0;
-
 }
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.