lightning-base-components 1.17.3-alpha → 1.17.6-alpha

package/src/lightning/buttonIcon/buttonIcon.js

@@ -32,6 +32,15 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     @api value;
 
+    /**
+     * Reserved for internal use only.
+     * Should be set to -1 if button should not
+     * be focused during tab navigation and should
+     * be set to 0 if button should be focused.
+     * @type {number}
+     */
+    @api tabIndex;
+
     /**
      * The variant changes the appearance of button-icon.
      * Accepted variants include bare, container, brand, border, border-filled, bare-inverse, and border-inverse.
@@ -326,7 +335,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
         super.renderedCallback();
 
         // remove-next-line-for-c-namespace
-        if (this.tooltipValue) {
+        if (this.tooltipValue && !this._tooltip) {
             this.createTooltip(this.tooltipValue);
         }
 

package/src/lightning/buttonIconStateful/button-icon-stateful.slds.css

@@ -939,6 +939,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       --slds-c-buttonicon-bare-color-border-disabled,
       transparent
     );
+    --slds-c-buttonicon-color-background-disabled: var(
+      --slds-c-buttonicon-bare-color-background-disabled,
+      transparent
+    );
   }
 
   /**
@@ -1168,7 +1172,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * outcome is the removal of this class and replacing the class with the SLDS
       * utility package solution.
       */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] .slds-assistive-text {
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;

package/src/lightning/dualListbox/dual-listbox.slds.css

@@ -0,0 +1,200 @@
+
+/* 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"]) .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;
+  }
+
+  /* Initializes a dueling picklist */
+  :host([data-render-mode="shadow"]) .slds-dueling-list {
+    display: flex;
+    clear: left;
+  }
+
+  /* Handles the layout of the dueling picklist */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column > lightning-button-icon {
+    margin-block: var(--sds-g-spacing-4, 1rem);
+    margin-inline: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column > lightning-button-icon:first-of-type {
+    margin-block-start: var(--sds-g-spacing-5, 1.5rem);
+  }
+
+  /* Changes the layout of the dueling picklist to be responsive */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column_responsive {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 15rem;
+    flex: 1 1 15rem;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    overflow: hidden;
+    min-width: calc(var(--sds-g-sizing-9, 2rem) * 3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column_responsive .slds-dueling-list__options {
+    width: auto;
+    max-width: 100%;
+  }
+
+  /* Bounding visual container for listbox of options */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options {
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-80, #c9c9c9);
+    border-radius: var(--sds-g-radius-border-2, 0.25rem);
+    padding-block: var(--sds-g-spacing-1, 0.25rem);
+    padding-inline: 0;
+    width: var(--sds-g-sizing-14, 15rem);
+    height: var(--sds-g-sizing-14, 15rem);
+    background-color: var(--sds-g-color-neutral-base-100, #ffffff);
+    overflow: auto;
+  }
+
+  /* Selected/dragging state of a listbox option, not currently supported by lbc */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options [aria-selected='true'] {
+    background-color: var(--sds-g-color-brand-base-50, #0176d3);
+    color: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options [aria-selected='true']:hover,:host([data-render-mode="shadow"]) 
+  .slds-dueling-list__options [aria-selected='true']:focus {
+    background: var(--sds-g-color-brand-base-30, #014486);
+    color: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options .slds-is-grabbed {
+    -webkit-transform: rotate(3deg);
+    transform: rotate(3deg);
+  }
+
+  /* Disabled state of a picklist option */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options.slds-is-disabled {
+    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    border-color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    color: var(--sds-g-color-neutral-base-30, #444444);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options.slds-is-disabled:hover {
+    cursor: not-allowed;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options.slds-is-disabled .slds-listbox__option:hover {
+    cursor: not-allowed;
+    background-color: transparent;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options.slds-is-disabled .slds-listbox__option:focus {
+    background-color: transparent;
+  }
+
+  :host([data-render-mode="shadow"][variant~='label-inline']) {
+    margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    width: 100%;
+    flex-basis: 100%;
+    padding: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"][variant~='label-inline']).slds-form-element {
+    padding: 0;
+    margin-block-end: 0;
+  }
+
+  :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+    margin-inline-start: 33%;
+  }
+
+  /* ----------------------------------------------------------------------------------------------- */
+
+  /* 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(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+    min-width: var(--sds-g-sizing-10, 3rem);
+  }
+
+  :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(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+    margin-inline-end: var(--sds-g-spacing-5, 1.5rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+    margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  }
+
+  :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(--sds-g-spacing-3, 0.75rem);
+    margin-inline-end: 0;
+  }
+
+  @media (max-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(--sds-g-spacing-3, 0.75rem);
+      margin-inline-end: 0;
+    }
+  }
+}

package/src/lightning/dualListbox/dualListbox.css

@@ -1,5 +1,7 @@
 /* @import 'lightning/sldsCommon';
-@import './listbox.slds.css'; */
+@import "./form-element.slds.css";
+@import './listbox.slds.css';
+@import './dual-listbox.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/dualListbox/dualListbox.html

@@ -1,9 +1,9 @@
 <template>
-    <div role="group" aria-labelledby="group-label">
+    <div role="group" aria-labelledby="group-label" part="dual-listbox">
 
         <div id="group-label" class={computedGroupLabelClass}>
             <template if:true={required}>
-                <abbr class="slds-required" title={i18n.required}>*</abbr>
+                <abbr class="slds-required" title={i18n.required} aria-label={i18n.required}>*</abbr>
             </template>{label}
         </div>
         <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>

package/src/lightning/dualListbox/dualListbox.js

@@ -25,6 +25,7 @@ import {
     normalizeBoolean,
     getRealDOMId,
     classListMutation,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import {
     InteractingState,
@@ -238,6 +239,7 @@ export default class LightningDualListbox extends LightningElement {
     set variant(value) {
         this._variant = normalizeVariant(value);
         this.updateClassList();
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     set size(value) {

package/src/lightning/dualListbox/form-element.slds.css

@@ -0,0 +1,232 @@
+
+/* 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: '') {
+    /* FORM ELEMENT: BASE */
+    :host([data-render-mode="shadow"]) .slds-form-element {
+        position: relative;
+        min-width: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        display: inline-block;
+        color: var(--sds-g-color-neutral-base-30, #444444);
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control {
+        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio,:host([data-render-mode="shadow"]) 
+    .slds-form-element__control .slds-checkbox {
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+        display: inline-block;
+        position: relative;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        vertical-align: top;
+        line-height: var(--sds-g-font-lineheight-1, 1);
+        z-index: 1;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+    .slds-form-element__helper { 
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+        flex-basis: 0%;
+        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--sds-g-font-weight-7, 700);
+        float: left;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+        display: inline-block;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
+        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        align-self: center;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+        display: inline-block;
+        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+        font-weight: var(--sds-g-font-weight-4, 400);
+        color: var(--sds-g-color-neutral-base-10, #181818);
+        width: 100%;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
+        vertical-align: bottom;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-required {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: STACKED */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1, 0.25rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+        padding: 0;
+        margin-block-end: 0;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        padding-inline-start: 0;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        width: 100%;
+        flex-basis: 100%;
+        clear: left;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+        float: none;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    /* --------------------------------------- */
+    
+    /* FORM ELEMENT: INLINE */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) {
+        display: block;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not([class*="slds-size"]) {
+        width: 100%;
+        flex-basis: 100%;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
+        padding: var(--sds-g-spacing-1, 0.25rem);   
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
+    }
+
+    @media (min-width: 48em) {
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+          float: left;
+          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
+          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
+          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
+          margin-block-end: 0;
+          position: relative;
+          z-index: 1;
+        }
+  
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+          padding-inline-start: 33%;
+          clear: none; /* Reset clear: left when switching to horizontal form layout */
+        }
+  
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
+        }
+      
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+            width: auto;
+            max-width: 100%;
+            -ms-flex-preferred-size: auto;
+            flex-basis: auto;
+            float: none;
+            position: relative;
+            padding-inline-start: 0;
+            margin-block-end: 0;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+            clear: none;
+        }
+    }
+}

package/src/lightning/dynamicIcon/dynamic-icon-ellie.slds.css

@@ -0,0 +1,180 @@
+
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+: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-icon-ellie {
+  width: calc(14rem / 16);
+  height: calc(14rem / 16);
+  display: inline-block;
+  overflow: hidden;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie.slds-is-animated {
+  will-change: transform;
+  animation: slds-icon-ellie-pop 0.3s ease-in 2s 1 both;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie.slds-is-animated svg {
+  will-change: transform;
+  animation: slds-icon-ellie 1.2s steps(20) 2.3s 2 alternate;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie.slds-is-paused,:host([data-render-mode="shadow"]) 
+.slds-icon-ellie.slds-is-paused svg {
+  animation-play-state: paused;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie svg {
+  width: 17.5rem;
+  vertical-align: top;
+  color: #0d9dda;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(2n + 1) {
+  fill: currentColor;
+  stroke: currentColor;
+  stroke-width: 4px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(2n) {
+  fill: white;
+  stroke: white;
+  stroke-width: 1px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(1),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(2) {
+  stroke-width: 4px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(2),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(1) {
+  stroke-width: 1px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(3),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(4) {
+  stroke-width: 3.95px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(4),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(3) {
+  stroke-width: 1.2px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(5),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(6) {
+  stroke-width: 3.85px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(6),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(5) {
+  stroke-width: 1.4px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(7),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(8) {
+  stroke-width: 3.6px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(8),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(7) {
+  stroke-width: 1.7px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(9),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(10) {
+  stroke-width: 3.3px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(10),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(9) {
+  stroke-width: 2px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(11),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(12) {
+  stroke-width: 3.2px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(12),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(11) {
+  stroke-width: 2.4px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(13),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(14) {
+  stroke-width: 3.15px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(14),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(13) {
+  stroke-width: 2.8px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(15),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(16) {
+  stroke-width: 3.1px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(16),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(15) {
+  stroke-width: 3.25px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(17),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(18) {
+  stroke-width: 3.05px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(18),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(17) {
+  stroke-width: 3.7px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(19),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(20) {
+  stroke-width: 3px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(20),:host([data-render-mode="shadow"]) 
+.slds-icon-ellie circle:nth-last-child(19) {
+  stroke-width: 4px;
+}
+
+@keyframes slds-icon-ellie-pop {
+  0% {
+    transform: scale(0.2);
+  }
+
+  70% {
+    transform: scale(1.1);
+  }
+
+  90% {
+    transform: scale(0.7);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes slds-icon-ellie {
+  to {
+    transform: translateX(-17.5rem);
+  }
+}