lightning-base-components 1.18.1-alpha → 1.18.2-alpha

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

@@ -0,0 +1,647 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+:host([data-render-mode="shadow"]:focus) {
+  outline: 0;
+}
+
+:host([data-render-mode="shadow"]) [part~='button'] {
+  display: inline-flex;
+  position: relative;
+  background: none;
+  background-color: var(--sds-c-button-color-background, var(--sds-s-button-color-background, transparent));
+  background-clip: border-box;
+  color: var(--sds-c-button-text-color, var(--sds-s-button-text-color, inherit));
+  padding-left: var(
+    --sds-c-button-spacing-inline-start,
+    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
+  );
+  padding-right: var(
+    --sds-c-button-spacing-inline-end,
+    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
+  );
+  padding-top: var(
+    --sds-c-button-spacing-block-start,
+    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
+  );
+  padding-bottom: var(
+    --sds-c-button-spacing-block-start,
+    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
+  );
+  border-width: var(--sds-c-button-sizing-border, var(--sds-s-button-sizing-border, 1px));
+  border-style: solid;
+  border-color: var(--sds-c-button-color-border, var(--sds-s-button-color-border, transparent));
+  border-start-start-radius: var(
+    --sds-c-button-radius-border-startstart,
+    var(
+      --sds-c-button-radius-border,
+      var(
+        --sds-s-button-radius-border-startstart,
+        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+      )
+    )
+  );
+  border-start-end-radius: var(
+    --sds-c-button-radius-border-startend,
+    var(
+      --sds-c-button-radius-border,
+      var(
+        --sds-s-button-radius-border-startend,
+        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+      )
+    )
+  );
+  border-end-start-radius: var(
+    --sds-c-button-radius-border-endstart,
+    var(
+      --sds-c-button-radius-border,
+      var(
+        --sds-s-button-radius-border-endstart,
+        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+      )
+    )
+  );
+  border-end-end-radius: var(
+    --sds-c-button-radius-border-endend,
+    var(
+      --sds-c-button-radius-border,
+      var(
+        --sds-s-button-radius-border-endend,
+        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+      )
+    )
+  );
+  box-shadow: var(--sds-c-button-shadow, var(--sds-s-button-shadow));
+  width: var(--sds-c-button-sizing-width);
+
+  /* this line height hook is incorrect but is used in core - need to get teams to change */
+  /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
+  line-height: var(--sds-c-button-line-height);
+  white-space: normal;
+  user-select: none;
+  align-items: center;
+  text-decoration: var(--sds-c-button-font-decoration, none);
+  appearance: none;
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:hover {
+  --sds-c-button-text-color: var(
+    --sds-c-button-text-color-hover,
+    var(--sds-s-button-text-color-hover, #0176d3)
+  );
+  --sds-c-button-color-background: var(
+    --sds-c-button-color-background-hover,
+    var(--sds-s-button-color-background-hover)
+  );
+  --sds-c-button-color-border: var(--sds-c-button-color-border-hover, var(--sds-s-button-color-border-hover));
+
+  cursor: pointer;
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:focus {
+  --sds-c-button-color-background: var(
+    --sds-c-button-color-background-focus,
+    var(--sds-s-button-color-background-focus)
+  );
+  --sds-c-button-color-border: var(
+    --sds-c-button-color-border-focus,
+    var(--sds-s-button-color-border-focus, #0176d3)
+  );
+  --sds-c-button-text-color: var(
+    --sds-c-button-text-color-focus,
+    var(--sds-s-button-text-color-focus, #0176d3)
+  );
+  --sds-c-button-shadow: var(--sds-c-button-shadow-focus, var(--sds-s-button-shadow-focus, #0176d3 0 0 3px));
+
+  outline: 0;
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:active {
+  --sds-c-button-text-color: var(
+    --sds-c-button-text-color-active,
+    var(--sds-s-button-text-color-active, currentColor)
+  );
+  --sds-c-button-color-background: var(
+    --sds-c-button-color-background-active,
+    var(--sds-s-button-color-background-active)
+  );
+  --sds-c-button-color-border: var(
+    --sds-c-button-color-border-active,
+    var(--sds-s-button-color-border-active, #0176d3)
+  );
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+  --sds-c-button-text-color: var(--sds-c-button-text-color-disabled, #939393);
+  --sds-c-button-color-background: var(--sds-c-button-color-background-disabled);
+  --sds-c-button-color-border: var(--sds-c-button-color-border-disabled);
+
+  pointer-events: none;
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:disabled * {
+  pointer-events: none;
+}
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  /**
+   * LBC default is the 'neutral' variant.
+   *
+   * We retain the 'neutral' variant in the hook names for interoperability
+   * with SLDS light DOM blueprints which do explicitly define a 'neutral'
+   * variant which is not the default.
+   *
+   * See 'base' variant below.
+   *
+   */
+
+  :host([data-render-mode="shadow"]) [part~='button'] {
+    /* Element spacing, display flex set by SDS button */
+    gap: var(--sds-g-spacing-2, 0.5rem);
+
+    /* slds-icon mapping */
+    --slds-c-icon-sizing-border: 0;
+    --slds-c-icon-sizing: 0.875rem;
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+
+    --sds-c-button-line-height: 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(--sds-g-spacing-4, 1rem))
+    );
+    --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
+
+    /**
+     * A note about fallbacks on the default variant:
+     *
+     * We cannot use --sds-c-button-* as fallbacks because the sds-button's state
+     * hooks are tied to a selector with higher specificity. In the default variant,
+     * attempting to use the previous state's hook as a fallback will fail because
+     * it picks up on sds-button's state hooks instead and creates an infinite loop
+     * which ultimately breaks styling.
+     *
+     * This is another use-case for removing the opinion of state selectors in SDS.
+     *
+     * So in the default variant below, you'll see many repeated fallback values.
+     *
+     * 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-neutral-radius-border-startstart,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-endstart: var(
+      --slds-c-button-radius-border-endstart,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-startend: var(
+      --slds-c-button-radius-border-startend,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-endend: var(
+      --slds-c-button-radius-border-endend,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
+      )
+    );
+
+    /* Background color */
+    --sds-c-button-color-background: var(
+      --slds-c-button-neutral-color-background,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
+    --sds-c-button-color-background-hover: var(
+      --slds-c-button-neutral-color-background-hover,
+      var(--sds-g-color-neutral-base-95, #f3f3f3)
+    );
+    --sds-c-button-color-background-focus: var(
+      --slds-c-button-neutral-color-background-focus,
+      var(--sds-c-button-color-background-hover)
+    );
+    --sds-c-button-color-background-active: var(
+      --slds-c-button-neutral-color-background-active,
+      var(--sds-g-color-neutral-base-95, #f3f3f3)
+    );
+
+    /* Border color */
+    --sds-c-button-color-border: var(
+      --slds-c-button-neutral-color-border,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --sds-c-button-color-border-hover: var(
+      --slds-c-button-neutral-color-border-hover,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --sds-c-button-color-border-focus: var(
+      --slds-c-button-neutral-color-border-focus,
+      var(--sds-c-button-color-border-hover)
+    );
+    --sds-c-button-color-border-active: var(
+      --slds-c-button-neutral-color-border-active,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+      );
+
+    /* Text color */
+    --sds-c-button-text-color: var(
+      --slds-c-button-neutral-text-color,
+      var(--sds-g-color-brand-base-50, #0176d3)
+    );
+    --sds-c-button-text-color-hover: var(
+      --slds-c-button-neutral-text-color-hover,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+    --sds-c-button-text-color-focus: var(
+      --slds-c-button-neutral-text-color-focus,
+      var(--slds-c-button-neutral-text-color-hover)
+
+    );
+    --sds-c-button-text-color-active: var(
+      --slds-c-button-neutral-text-color-active,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+
+    /* Shadow */
+    --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
+    --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
+
+    /* Disabled */
+    --sds-c-button-color-background-disabled: var(
+      --slds-c-button-neutral-color-background-disabled,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
+    --sds-c-button-color-border-disabled: var(
+      --slds-c-button-neutral-color-border-disabled,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --sds-c-button-text-color-disabled: var(
+      --slds-c-button-neutral-text-color-disabled,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+  }
+
+  :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(
+      --slds-c-button-brand-color-background,
+      var(--sds-g-color-brand-base-50, #0176d3)
+    );
+
+    --slds-c-button-neutral-color-border: var(
+      --slds-c-button-brand-color-border,
+      var(--sds-g-color-brand-base-50, #0176d3)
+    );
+
+    --slds-c-button-neutral-color-border-hover: var(
+      --slds-c-button-brand-color-border-hover,
+      var(--sds-g-color-brand-base-40, #0b5cab)
+    );
+    --slds-c-button-neutral-color-border-focus: var(
+      --slds-c-button-brand-color-border-focus,
+      var(--slds-c-button-brand-color-border-hover)
+    );
+    --slds-c-button-neutral-color-border-active: var(
+      --slds-c-button-brand-color-border-active,
+      var(--slds-c-button-brand-color-background-active)
+    );
+
+    --slds-c-button-neutral-text-color: var(
+      --slds-c-button-brand-text-color,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+
+    --slds-c-button-neutral-color-background-hover: var(
+      --slds-c-button-brand-color-background-hover,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+    --slds-c-button-neutral-color-background-focus: var(
+      --slds-c-button-brand-color-background-focus,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+    --slds-c-button-neutral-color-background-active: var(
+      --slds-c-button-brand-color-background-active,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+    --slds-c-button-neutral-text-color-hover: var(
+      --slds-c-button-brand-text-color-hover,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-button-neutral-text-color-active: var(
+      --slds-c-button-brand-text-color-active,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-button-neutral-text-color-focus: var(
+      --slds-c-button-brand-text-color-focus,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-button-neutral-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-neutral-color-background-disabled);
+    --slds-c-button-neutral-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-brand-base-30, #014486);
+    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-brand-base-30, #014486);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-brand-base-30, #014486);
+    --slds-c-button-neutral-color-border-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
+  }
+
+  :host([data-render-mode="shadow"][variant='inverse']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: transparent;
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-button-neutral-color-border-disabled: var(--sds-g-color-neutral-base-60, #939393);
+    --slds-c-button-neutral-color-background-disabled: transparent;
+  }
+
+  :host([data-render-mode="shadow"][variant='destructive']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-error-base-100, #ffffff);
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-error-base-30, #8e030f);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-error-base-30, #8e030f);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-error-base-30, #8e030f);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-error-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-error-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-error-base-100, #ffffff);
+    --slds-c-button-neutral-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-neutral-color-background-disabled);
+    --slds-c-button-neutral-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"][variant='success']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(--sds-g-color-success-base-70, #45c65a);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-success-base-80, #91db8b);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-color-border-active: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-neutral-base-10, #181818);
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-success-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-success-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-success-base-100, #ffffff);
+    --slds-c-button-neutral-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-neutral-color-background-disabled);
+    --slds-c-button-neutral-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-error-base-50, #ea001e);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-color-border-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
+  }
+
+  /**
+   * 'base' variant is not the default in LBC. It is the default in the light
+   * DOM version of SLDS.
+   *
+   * So even though this is a non-default variant in this context, the hooks
+   * for this variant are written as the default for interoperability with
+   * SLDS light DOM.
+   *
+   * E.g. --slds-c-button-color-background
+   */
+  :host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
+    --slds-c-button-neutral-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
+    --slds-c-button-neutral-color-border: transparent;
+    --slds-c-button-neutral-color-border-hover: transparent;
+    --slds-c-button-neutral-color-border-focus: transparent;
+    --slds-c-button-neutral-color-border-active: var(--sds-g-color-neutral-base-30, #444444);
+    --slds-c-button-neutral-color-border-disabled: transparent;
+    --slds-c-button-neutral-color-background-hover: transparent;
+    --slds-c-button-neutral-color-background-active: transparent;
+  }
+
+  :host([data-render-mode="shadow"][stretch]) [part~='button'] {
+    --sds-c-button-sizing-width: 100%;
+
+    justify-content: center;
+  }
+
+  /**
+   * Center button on all variants except 'base', and 'text'
+   *
+   * This addresses the issue of customers relying on preexisting x-axis centering
+   * when they arbitrarily change the width of the button without the stretch variant.
+   *
+   * Ref
+   * - https://github.com/salesforce-ux/design-system-internal/pull/4344
+   * - https://github.com/salesforce-ux/design-system-internal/pull/4949
+   */
+  :host([data-render-mode="shadow"][variant='brand']) [part~='button'],:host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'],:host([data-render-mode="shadow"][variant='inverse']) [part~='button'],:host([data-render-mode="shadow"][variant='success']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
+    justify-content: center;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='start'] {
+    display: inline-flex;
+    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='end'] {
+    display: inline-flex;
+    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+  }
+}
+
+/**
+ * A temporarily baked-in utility class until SLDS gets a proper utility package.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * outcome is the removal of this class and replacing the class with the SLDS
+ * utility package solution.
+ */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+:host([data-render-mode="shadow"]) .slds-button_reset {
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  text-align: inherit;
+}
+
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+
+    :host([data-render-mode="shadow"]) .slds-accordion__list-item {
+        border-top-width: var(--slds-c-accordionsection-sizing-border, var(--sds-g-sizing-border-1, 1px));
+        border-top-style: solid;
+        border-top-color: var(--slds-c-accordionsection-color-border,  var(--slds-g-color-border-base-1));
+    }
+
+    :host([data-render-mode="shadow"]) [part~="accordion-section"] {
+        padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
+        padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-spacing-3, 0.75rem));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-spacing-3, 0.75rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-accordion__summary {
+        display: flex;
+        margin-block-start: calc(var(--slds-c-accordionsection-spacing-block-start,
+        var(--sds-g-sizing-4, 0.75rem)) * -1);
+        margin-block-end: calc(var(--slds-c-accordionsection-spacing-block-end,
+        var(--sds-g-sizing-4, 0.75rem)) * -1);
+        margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inline-start,
+        var(--sds-g-sizing-4, 0.75rem)) * -1);
+        margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inline-end,
+        var(--sds-g-sizing-4, 0.75rem) * -1));
+        padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
+        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-neutral-base-10));
+
+        display: flex;
+        flex-grow: 1;
+        min-width: 0;
+        color: var(--slds-c-accordion-heading-color, var(--slds-g-color-neutral-base-10));
+        font-size: var(--slds-c-accordion-heading-font-size, 1em);
+        line-height: var(--slds-c-accordion-heading-font-lineheight, var(--sds-g-font-lineheight-2, 1.25));
+    }
+
+    :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;
+        min-width: 0;
+        margin-block-start: calc(
+          var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-sizing-4, 0.75rem)) * -1);
+        margin-block-end: calc(
+        var(--slds-c-accordionsection-spacing-block-end,
+        var(--sds-g-sizing-4, 0.75rem)) * -1);
+        margin-inline-end: calc(
+          var(--slds-c-accordionsection-spacing-inline-end,
+          var(--sds-g-sizing-4, 0.75rem)) * -1);
+        margin-inline-start: calc(
+          var(--slds-c-accordionsection-spacing-inline-start,
+          var(--sds-g-sizing-4, 0.75rem)) * -1);
+        padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
+    }
+    
+    /* 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(--sds-g-color-brand-base-30, #014486));
+
+        color: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
+    }
+
+    /* Note: 
+    Media query will need to be worked out properly 
+    and be replaced with utility classes */
+    @media (min-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.css

@@ -1,3 +1,17 @@
+@import 'lightning/sldsCommon';
+@import './accordion-section.slds.css';
+
 :host {
     display: list-item;
 }
+
+/* Note:
+   - Prevents double border on mixed/shadow mode: 
+   This is added because we have 'slds-accordion__list-item' from the host and inside the component (within the shadow boundary). This will cause double border on mixed/shadow mode.
+   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"]) {
+    border: none !important;
+}
+