lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/baseCombobox/spinner.slds.css

@@ -0,0 +1,438 @@
+
+/* 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"]) [part='spinner'] .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;
+}
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part='backdrop'] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9050;
+    background-color: var(--slds-c-spinner-backdrop-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    visibility: visible;
+    opacity: 0.75;
+    transition: opacity 0.2s ease, visibility 0s;
+    transition-delay: 0s, 0.3s;
+  }
+
+  /* brand */
+
+  :host([data-render-mode="shadow"][variant='brand']) [part~='spinner'] {
+    --slds-c-spinner-color-background: var(
+      --slds-c-spinner-brand-color-background,
+      var(--sds-g-color-brand-base-60, #1b96ff)
+    );
+  }
+
+  /* inverse */
+
+  :host([data-render-mode="shadow"][variant='inverse']) [part~='spinner'] {
+    --slds-c-spinner-color-background: var(
+      --slds-c-spinner-inverse-color-background,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
+  }
+
+  /* large */
+
+  :host([data-render-mode="shadow"][size='large']) [part='spinner'] {
+    width: 2.75rem;
+  }
+
+  :host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='spinner']::after {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  :host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before {
+    top: -0.3125rem;
+    left: -0.3125rem;
+    animation-name: dotsBounceBefore-medium;
+  }
+
+  :host([data-render-mode="shadow"][size='large']) [part='spinner']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after {
+    top: -0.3125rem;
+    right: -0.3125rem;
+    animation-name: dotsBounceAfter-medium;
+  }
+
+  /* end size large */
+
+  /* medium */
+
+  :host([data-render-mode="shadow"][size='medium']) [part='spinner'] {
+    width: 2rem;
+  }
+
+  :host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  :host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before {
+    top: -0.25rem;
+    left: -0.25rem;
+    animation-name: dotsBounceBefore-medium;
+  }
+
+  :host([data-render-mode="shadow"][size='medium']) [part='spinner']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after {
+    top: -0.25rem;
+    right: -0.25rem;
+    animation-name: dotsBounceAfter-medium;
+  }
+
+  /* end size medium */
+
+  /* small */
+
+  :host([data-render-mode="shadow"][size='small']) [part='spinner'] {
+    width: 1.25rem;
+  }
+
+  :host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='spinner']::after {
+    width: 0.25rem;
+    height: 0.25rem;
+  }
+
+  :host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before {
+    top: -0.125rem;
+    left: -0.125rem;
+    animation-name: dotsBounceBefore-small;
+  }
+
+  :host([data-render-mode="shadow"][size='small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after {
+    width: 0.25rem;
+    height: 0.25rem;
+    top: -0.125rem;
+    right: -0.125rem;
+    animation-name: dotsBounceAfter-small;
+  }
+
+  @keyframes dotsBounceBefore-small {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(-0.375rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dotsBounceAfter-small {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(0.375rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  /* end size small */
+
+  /* x-small */
+
+  :host([data-render-mode="shadow"][size='x-small']) [part='spinner'] {
+    width: 1rem;
+  }
+
+  :host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after {
+    width: 0.25rem;
+    height: 0.25rem;
+  }
+
+  :host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before {
+    top: -0.125rem;
+    left: -0.125rem;
+    animation-name: dotsBounceBefore-extraSmall;
+  }
+
+  :host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after {
+    top: -0.125rem;
+    right: -0.125rem;
+    animation-name: dotsBounceAfter-extraSmall;
+  }
+
+  @keyframes dotsBounceBefore-extraSmall {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(-0.25rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dotsBounceAfter-extraSmall {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(0.25rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  /* end size x-small */
+
+  /* xx-small */
+
+  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner'] {
+    width: 0.5rem;
+  }
+
+  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
+    width: 0.125rem;
+    height: 0.125rem;
+  }
+
+  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before {
+    top: -0.0625rem;
+    left: -0.0625rem;
+    animation-name: dotsBounceBefore-extraExtraSmall;
+  }
+
+  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
+    top: -0.0625rem;
+    right: -0.0625rem;
+    animation-name: dotsBounceAfter-extraExtraSmall;
+  }
+
+  @keyframes dotsBounceBefore-extraExtraSmall {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
+    }
+
+    80% {
+      transform: translate3d(-0.125rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dotsBounceAfter-extraExtraSmall {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
+      transform: translate3d(0, 0, 0);
+    }
+
+    80% {
+      animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
+      transform: translate3d(0.125rem, 0, 0);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  /* end size xx-small */
+
+  :host([data-render-mode="shadow"]) [part~='spinner'] {
+    position: absolute;
+    top: 50%;
+    width: 2rem;
+
+    /*! @noflip */
+    left: 50%;
+    z-index: 9050;
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='spinner'],:host([data-render-mode="shadow"]) 
+  [part~='dot-a'],:host([data-render-mode="shadow"]) 
+  [part~='dot-b'] {
+    transform-origin: 50% 50%;
+    will-change: transform;
+  }
+
+  /* creates the circles */
+  :host([data-render-mode="shadow"]) [part~='dot-a'],:host([data-render-mode="shadow"]) 
+  [part~='dot-b'] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  /* stylelint-disable no-duplicate-selectors */
+  :host([data-render-mode="shadow"]) [part~='spinner']::before,:host([data-render-mode="shadow"]) 
+  [part~='spinner']::after,:host([data-render-mode="shadow"]) 
+  [part~='dot-a']::before,:host([data-render-mode="shadow"]) 
+  [part~='dot-b']::before,:host([data-render-mode="shadow"]) 
+  [part~='dot-a']::after,:host([data-render-mode="shadow"]) 
+  [part~='dot-b']::after {
+    content: '';
+    position: absolute;
+    background-color: var(--slds-c-spinner-color-background, var(--sds-g-color-neutral-base-65, #a0a0a0));
+    border-radius: 50%;
+    animation-duration: 1000ms;
+    animation-iteration-count: infinite;
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-a'] {
+    transform: rotate(60deg);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-b'] {
+    transform: rotate(120deg);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='spinner']::before {
+    animation-delay: -83.33333ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-a']::before {
+    animation-delay: 83.33333ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-b']::before {
+    animation-delay: 250ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='spinner']::after {
+    animation-delay: 416.66667ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-a']::after {
+    animation-delay: 583.33333ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-b']::after {
+    animation-delay: 750ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='spinner']::after,:host([data-render-mode="shadow"]) 
+  [part~='spinner']::before,:host([data-render-mode="shadow"]) 
+  [part~='dot-a']::after,:host([data-render-mode="shadow"]) 
+  [part~='dot-a']::before,:host([data-render-mode="shadow"]) 
+  [part~='dot-b']::after,:host([data-render-mode="shadow"]) 
+  [part~='dot-b']::before {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='spinner']::before,:host([data-render-mode="shadow"]) 
+  [part~='dot-a']::before,:host([data-render-mode="shadow"]) 
+  [part~='dot-b']::before {
+    animation-name: dotsBounceBefore-medium;
+    top: -0.25rem;
+    left: -0.25rem;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='spinner']::after,:host([data-render-mode="shadow"]) 
+  [part~='dot-a']::after,:host([data-render-mode="shadow"]) 
+  [part~='dot-b']::after {
+    animation-name: dotsBounceAfter-medium;
+    top: -0.25rem;
+    right: -0.25rem;
+  }
+
+  @keyframes dotsBounceBefore-medium {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(-0.5rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dotsBounceAfter-medium {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(0.5rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+}

package/src/lightning/baseComboboxItem/baseComboboxItem.js

@@ -1,12 +1,14 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 import card from './card.html';
 import inline from './inline.html';
 
-export default class LightningBaseComboboxItem extends LightningElement {
+export default class LightningBaseComboboxItem extends LightningShadowBaseClass {
     @api item = {};
 
     connectedCallback() {
+        super.connectedCallback();
         // We want to make sure that the item has 'aria-selected' if it's selectable
         if (this.item.selectable) {
             this.setAttribute('aria-selected', 'false');

package/src/lightning/baseComboboxItem/inline.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './listbox.slds.css';

package/src/lightning/breadcrumb/breadcrumb.css

@@ -1,5 +1,5 @@
-/* @import 'lightning/sldsCommon';
-@import './breadcrumb.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './breadcrumb.slds.css';
 
 :host {
     display: list-item;

package/src/lightning/breadcrumb/breadcrumb.js

@@ -1,11 +1,12 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const DEFAULT_HREF = '#';
 
 /**
  * An item in the hierarchy path of the page the user is on.
  */
-export default class LightningBreadcrumb extends LightningElement {
+export default class LightningBreadcrumb extends LightningShadowBaseClass {
     /**
      * The URL of the page that the breadcrumb goes to.
      * @type {string}
@@ -80,6 +81,7 @@ export default class LightningBreadcrumb extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.connected = true;
         // add default CSS classes to custom element tag
         this.classList.add('slds-breadcrumb__item');

package/src/lightning/breadcrumb/breadcrumb.slds.css

@@ -1,15 +1,9 @@
 
-
 /* 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: '') {
   :host([data-render-mode="shadow"]) [part~='breadcrumb'] {
-    /* Host reassignments to composed breadcrumbs for parity with SLDS blueprint
-        https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview */
-    --slds-c-breadcrumbs-spacing-inline-start: var(--slds-c-breadcrumb-spacing-inline-start);
-    --slds-c-breadcrumbs-spacing-inline-end: var(--slds-c-breadcrumb-spacing-inline-end);
-
     display: block;
     padding-block-start: 0;
     padding-inline-end: var(--slds-c-breadcrumb-spacing-inline-end, var(--sds-g-spacing-2, 0.5rem));
@@ -18,7 +12,8 @@
     color: var(--slds-g-color-brand-base-50, var(--sds-g-color-brand-base-50, #0176d3));
   }
 
-  :host([data-render-mode="shadow"]) [part~='breadcrumb']:hover, [part~='breadcrumb']:focus {
+  :host([data-render-mode="shadow"]) [part~='breadcrumb']:hover,:host([data-render-mode="shadow"]) 
+  [part~='breadcrumb']:focus {
     text-decoration: none;
     color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
   }

package/src/lightning/breadcrumbs/__docs__/breadcrumbs.md

@@ -39,12 +39,12 @@ This example adds a margin around the breadcrumbs using an SLDS class.
 </lightning-breadcrumbs>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, adjust the spacing before and after the greater-than sign using the `--sds-c-breadcrumbs-*` custom properties.
+Use SLDS styling hooks to customize the component's styles. For example, adjust the spacing before and after the greater-than sign using the `--slds-c-breadcrumbs-*` custom properties.
 
 ```css
 .my-breadcrumbs {
-    --sds-c-breadcrumbs-spacing-inline-end: 20px;
-    --sds-c-breadcrumbs-spacing-inline-start: 30px;
+    --slds-c-breadcrumbs-spacing-inline-end: 20px;
+    --slds-c-breadcrumbs-spacing-inline-start: 30px;
 }
 ```
 

package/src/lightning/breadcrumbs/breadcrumbs.css

@@ -1,5 +1,5 @@
-/* @import 'lightning/sldsCommon';
-@import './breadcrumbs.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './breadcrumbs.slds.css';
 
 :host {
     display: block;

package/src/lightning/breadcrumbs/breadcrumbs.js

@@ -1,11 +1,12 @@
-import { LightningElement } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 /**
  * A hierarchy path of the page you're currently visiting within the website or app.
  * @slot default Placeholder for lightning-breadcrumb
  */
-export default class LightningBreadcrumbs extends LightningElement {
+export default class LightningBreadcrumbs extends LightningShadowBaseClass {
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('aria-label', 'Breadcrumbs');
         this.setAttribute('role', 'navigation');
     }

package/src/lightning/breadcrumbs/breadcrumbs.slds.css

@@ -1,10 +1,16 @@
 
-
 /* 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: '') {
   :host([data-render-mode="shadow"]) [part~='breadcrumbs'] {
+    /**
+     * Reassignments for parity with SLDS blueprint
+     * https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview
+     */
+    --slds-c-breadcrumb-spacing-inline-start: var(--slds-c-breadcrumbs-spacing-inline-start);
+    --slds-c-breadcrumb-spacing-inline-end: var(--slds-c-breadcrumbs-spacing-inline-end);
+
     flex-wrap: wrap;
     align-items: flex-start;
     display: flex;

package/src/lightning/button/__docs__/button.md

@@ -145,11 +145,11 @@ To apply custom styling, use the `:host` selector or define a custom class using
 </lightning-button>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button with `brand` variant using the `--sds-c-button-brand-color-background` custom property.
+Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button with `brand` variant using the `--slds-c-button-brand-color-background` custom property.
 
 ```css
 .my-brand {
-    --sds-c-button-brand-color-background: purple;
+    --slds-c-button-brand-color-background: purple;
 }
 ```
 
@@ -157,16 +157,16 @@ Custom properties for buttons work only with particular `lightning-button` varia
 
 | CSS Custom Property                 | `lightning-button` Variants                      |
 | ----------------------------------- | ------------------------------------------------ |
-| `--sds-c-button-*`                  | all                                              |
-| `--sds-c-button-color-*`            | `base`                                           |
-| `--sds-c-button-text-color-*`       | `neutral` (default), `base`, and `brand-outline` |
-| `--sds-c-button-neutral-*`          | `neutral` (default)                              |
-| `--sds-c-button-brand-*`            | `brand`                                          |
-| `--sds-c-button-outline-brand-*`    | `brand-outline`                                  |
-| `--sds-c-button-destructive-*`      | `destructive`                                    |
-| `--sds-c-button-text-destructive-*` | `destructive-text`                               |
-| `--sds-c-button-inverse-*`          | `inverse`                                        |
-| `--sds-c-button-success-*`          | `success`                                        |
+| `--slds-c-button-*`                  | all                                              |
+| `--slds-c-button-color-*`            | `base`                                           |
+| `--slds-c-button-text-color-*`       | `neutral` (default), `base`, and `brand-outline` |
+| `--slds-c-button-neutral-*`          | `neutral` (default)                              |
+| `--slds-c-button-brand-*`            | `brand`                                          |
+| `--slds-c-button-outline-brand-*`    | `brand-outline`                                  |
+| `--slds-c-button-destructive-*`      | `destructive`                                    |
+| `--slds-c-button-text-destructive-*` | `destructive-text`                               |
+| `--slds-c-button-inverse-*`          | `inverse`                                        |
+| `--slds-c-button-success-*`          | `success`                                        |
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
@@ -186,9 +186,9 @@ We don't support changing the label alignment on the button. To adjust the paddi
 
 To address text wrapping in long labels when the browser viewport is reduced, customize the line height and block spacing of the button label using SLDS styling hooks.
 
--   `--sds-c-button-line-height`
--   `--sds-c-button-spacing-block-start`
--   `--sds-c-button-spacing-block-end`
+-   `--slds-c-button-line-height`
+-   `--slds-c-button-spacing-block-start`
+-   `--slds-c-button-spacing-block-end`
 
 On mobile screens, we recommend setting the button size to
 44x44 px. If you have more than one target on a screen that performs the same action, only one of the targets need to meet the target size of 44x44 px. For more information, see [Follow Accessible Mobile Design Guidelines

package/src/lightning/button/__examples__/inverse/inverse.css

@@ -1,3 +1,11 @@
 .lgc-bg-inverse {
     background-color: rgb(22 50 92);
 }
+
+.slds-m-left_x-small {
+    margin-left: 0.5rem;
+}
+  
+.slds-p-around_medium {
+   padding: 1rem;
+}

package/src/lightning/button/__examples__/inverse/inverse.html

@@ -7,7 +7,8 @@
                     <code>variant</code> attribute has a value of <code>inverse</code>
                 </p>
 
-            <div class="slds-p-around_medium lgc-bg-inverse">
+            <div class="slds-p-around_medium lgc-bg-inverse"
+            style="display: flex">
                 <!-- Basic button -->
                 <lightning-button variant="inverse" label="Download" title="Download action" class="slds-m-left_x-small"></lightning-button>
 
@@ -28,7 +29,7 @@
                 <li><code>disabled</code> attribute is present</li>
             </ul>
 
-            <div class="slds-p-around_medium lgc-bg-inverse">
+            <div class="slds-p-around_medium lgc-bg-inverse" style="display: flex">
                 <!-- Button that is disabled -->
                 <lightning-button variant="inverse" label="Delete" title="Delete action" disabled class="slds-m-left_x-small"></lightning-button>
 

package/src/lightning/button/button.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './button.slds.css';