lightning-base-components 1.21.1-alpha → 1.21.2-alpha

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

@@ -0,0 +1,252 @@
+
+ @supports (--styling-hooks: '') {
+   /* Horizontal listbox - used for pill container */
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
+     display: inline-flex;
+     flex-wrap: wrap;
+     align-items: center;
+   }
+
+  :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
+    display: flex;
+  }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
+     padding-inline-start: 0.125rem;
+   }
+
+  /* Vertical listbox */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+    background-color: var(--slds-g-color-surface-container-2);
+    text-decoration: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
+    background-color: transparent;
+    cursor: default;
+  }
+
+  /* Modifies the listbox option if it contains an entity object */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
+    padding-block: var(--slds-g-spacing-1);
+    padding-inline: var(--slds-g-spacing-3);
+  }
+
+  /* Modifies the listbox option if it contains a plain object or string */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+    padding-block: var(--slds-g-spacing-2);
+    padding-inline: var(--slds-g-spacing-3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+    padding-block: var(--slds-g-spacing-2);
+    padding-inline: var(--slds-g-spacing-3);
+  }
+
+  /* Choosable option within listbox */
+  :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+    cursor: pointer;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+    outline: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
+    color: var(--slds-g-color-disabled-2);
+  }
+
+  /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
+
+  /* the _vertical variations only apply to combobox's */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
+    margin-inline-end: var(--slds-g-spacing-2);
+  }
+
+  /* If the listbox option has metadata or secondary information that sits below its primary text */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
+    margin-block-start: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  /* Header for choosable option within listbox */
+  :host([data-render-mode="shadow"]) .slds-listbox__option-header {
+    font-size: var(--slds-g-font-scale-neg-1);
+    font-weight: 700;
+  }
+
+  /* Container for listbox option icon */
+  :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+    width: var(--slds-g-sizing-7);
+    display: inline-flex;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    color: var(--slds-g-color-accent-2);
+  }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
+     color: currentcolor;
+   }
+
+  /* The icon within a plain listbox that indicates if an option has been selected or not. */
+  :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
+    opacity: 0;
+    fill: var(--slds-g-color-accent-2);
+  }
+
+  /* Modifier that makes selected icon visible */
+  :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+    opacity: 1;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
+    color: var(--slds-g-color-accent-2);
+  }
+
+   /* The main text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
+     max-width: 100%;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     display: block;
+     margin-block-end: 0.125rem;
+   }
+
+  /* The metadata or secondary text of an entity listbox */
+  :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+    display: block;
+    margin-block-start: calc(var(--slds-g-spacing-1) * -1);
+    color: var(--slds-g-color-neutral-base-30);
+  }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
+     color: currentcolor;
+   }
+
+   /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
+
+  /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
+
+   /* The container of pill selections found inside of a combobox group */
+
+   /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
+     position: relative;
+     padding: 0;
+     padding-inline-end: calc(var(--slds-g-spacing-8) + var(--slds-g-spacing-3));
+     height: 1.875rem;
+     overflow: hidden;
+   }
+
+  /* Expanded state of a selection group */
+  :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+    height: auto;
+    padding: 0;
+  }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
+     padding-block-start: 0;
+     padding-block-end: 0.125rem;
+     padding-inline: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
+     padding-block-start: 0.125rem;
+     padding-block-end: 0;
+     padding-inline: 0.125rem;
+   }
+
+  /* Toggle button to show all of the pill selections */
+  :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: var(--slds-g-spacing-2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
+    line-height: 1;
+  }
+
+  /* Media Object classes need to be pulled out for reusability */
+  :host([data-render-mode="shadow"]) .slds-media {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure {
+    flex-shrink: 0;
+    margin-inline-end: var(--slds-g-spacing-3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+    min-width: var(--slds-g-sizing-10);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
+  .slds-media__body> :last-child {
+    margin-block-end: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media-body-iefix {
+    flex-shrink: 0;
+    flex-basis: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
+    margin-inline-end: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+    margin-inline-start: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+    margin-inline-end: var(--slds-g-spacing-5);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+    margin-inline-start: var(--slds-g-spacing-5);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
+    flex: 0 1 auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_center {
+    align-items: center;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
+    margin-block: 0;
+    margin-inline-start: var(--slds-g-spacing-3);
+    margin-inline-end: 0;
+  }
+
+   @media (width <= 48em) {
+
+    :host([data-render-mode="shadow"]) .slds-media_responsive {
+      display: block;
+    }
+
+     :host([data-render-mode="shadow"]) .slds-media_responsive .slds-media__figure {
+       margin-block: 0;
+       margin-inline-start: var(--slds-g-spacing-3);
+       margin-inline-end: 0;
+     }
+   }
+ }

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

@@ -0,0 +1,429 @@
+
+/* 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;
+    inset: 0;
+    z-index: 9050;
+    background-color: var(--_slds-c-spinner-backdrop-color-background, var(--slds-g-color-neutral-base-100));
+    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-g-color-accent-1);
+  }
+
+  /* inverse */
+
+  :host([data-render-mode="shadow"][variant='inverse']) [part='spinner'] {
+    --_slds-c-spinner-color-background: var(--slds-g-color-neutral-base-100);
+  }
+
+  /* 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(--slds-g-color-neutral-base-65));
+    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.3333ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part='dot-a']::before {
+    animation-delay: 83.3333ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part='dot-b']::before {
+    animation-delay: 250ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part='spinner']::after {
+    animation-delay: 416.6667ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part='dot-a']::after {
+    animation-delay: 583.3333ms;
+  }
+
+  :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/baseComboboxFormattedText/baseComboboxFormattedText.js

@@ -1,6 +1,7 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
-export default class LightningBaseComboboxFormattedText extends LightningElement {
+export default class LightningBaseComboboxFormattedText extends LightningShadowBaseClass {
     @track _text = '';
     @track hasParts;