lightning-base-components 1.18.1-alpha → 1.18.2-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/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/__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';

package/src/lightning/button/button.html

@@ -9,6 +9,7 @@
             value={value}
             onfocus={handleButtonFocus}
             onblur={handleButtonBlur}
+            onclick={handleButtonClick}
             aria-atomic={computedAriaAtomic}
             aria-busy={computedAriaBusy}
             aria-label={ariaLabel}
@@ -17,15 +18,16 @@
             aria-live={computedAriaLive}
             aria-pressed={computedAriaPressed}
             aria-relevant={computedAriaRelevant}
+            part="button"
             tabindex={tabIndex}>
         <template if:true={showIconLeft}>
-            <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
+            <lightning-primitive-icon part="start" icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
         </template>
 
         {label}
 
         <template if:true={showIconRight}>
-            <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
+            <lightning-primitive-icon part="end" icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
         </template>
     </button>
 </template>