lightning-base-components 1.17.2-alpha → 1.17.5-alpha

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);
+  }
+}

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

@@ -0,0 +1,63 @@
+
+/* 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-eq {
+  position: relative;
+  width: calc(14rem / 16);
+  height: calc(14rem / 16);
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-eq.slds-is-animated .slds-icon-eq__bar {
+  animation: slds-icon-eq 0.25s ease-in-out infinite alternate;
+  will-change: transform;
+  height: 0.1875rem;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-eq.slds-is-animated .slds-icon-eq__bar:nth-of-type(2) {
+  animation-duration: 0.65s;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-eq.slds-is-animated .slds-icon-eq__bar:nth-of-type(3) {
+  animation-duration: 0.35s;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-eq__bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: calc(4rem / 16);
+  height: 0.5625rem;
+  background: #0176d3;
+  transform: scaleY(1);
+  transform-origin: bottom;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-eq__bar:nth-of-type(2) {
+  left: calc(5rem / 16);
+  height: 0.875rem;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-eq__bar:nth-of-type(3) {
+  left: calc(10rem / 16);
+  height: 0.75rem;
+}
+
+@keyframes slds-icon-eq {
+  to {
+    transform: scaleY(4.6666666667);
+  }
+}

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

@@ -0,0 +1,46 @@
+
+/* 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-score {
+  display: inline-block;
+  width: 0.3125rem;
+  height: 0.3125rem;
+  position: relative;
+}
+
+:host([data-render-mode="shadow"]) [class*="slds-icon-score__"] {
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.4s ease-in-out;
+  will-change: opacity;
+  stroke-width: 1.125px;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-score__positive {
+  fill: #2e844a;
+  stroke: #2e844a;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-score__negative {
+  fill: transparent;
+  stroke: #ba0517;
+}
+
+:host([data-render-mode="shadow"]) [data-slds-state="positive"] .slds-icon-score__positive,:host([data-render-mode="shadow"]) 
+[data-slds-state="negative"] .slds-icon-score__negative {
+  opacity: 1;
+}

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

@@ -0,0 +1,122 @@
+
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    --_strength-offset-delay: 1s;
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :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-strength {
+    width: 1.6875rem;
+    height: 0.4375rem;
+    display: inline-block;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-strength circle {
+    stroke-width: 0.95px;
+    fill: transparent;
+    stroke: #939393;
+    transition: fill 0.4s ease-in-out, stroke 0.4s ease-in-out;
+    will-change: fill, stroke;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-strength[data-slds-strength="1"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="2"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="2"] circle:nth-child(2),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="3"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="3"] circle:nth-child(2),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="3"] circle:nth-child(3) {
+    fill: #2e844a;
+    stroke: #2e844a;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-strength[data-slds-strength="-1"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="-2"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="-2"] circle:nth-child(2),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="-3"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="-3"] circle:nth-child(2),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength[data-slds-strength="-3"] circle:nth-child(3) {
+    fill: #fddde3;
+    stroke: #ba0517;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-strength.slds-is-animated circle {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    animation: slds-icon-strength-positive-load 0.4s var(--_strength-offset-delay) ease-in-out alternate both paused;
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-strength.slds-is-animated circle:nth-child(2) {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    animation-delay: calc(var(--_strength-offset-delay) + 0.4s);
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-strength.slds-is-animated circle:nth-child(3) {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    animation-delay: calc(var(--_strength-offset-delay) + 0.8s);
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-strength.slds-is-animated[data-slds-strength^="-"] circle {
+    animation-name: slds-icon-strength-negative-load;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-strength.slds-is-animated[data-slds-strength="-1"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="-2"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="-2"] circle:nth-child(2),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="-3"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="-3"] circle:nth-child(2),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="-3"] circle:nth-child(3),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="1"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="2"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="2"] circle:nth-child(2),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="3"] circle:nth-child(1),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="3"] circle:nth-child(2),:host([data-render-mode="shadow"]) 
+  .slds-icon-strength.slds-is-animated[data-slds-strength="3"] circle:nth-child(3) {
+    animation-play-state: running;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-strength.slds-is-paused circle {
+    animation-play-state: paused !important;
+  }
+
+  @keyframes slds-icon-strength-positive-load {
+    0% {
+      fill: transparent;
+      stroke: #939393;
+    }
+
+    100% {
+      fill: #2e844a;
+      stroke: #2e844a;
+    }
+  }
+
+  @keyframes slds-icon-strength-negative-load {
+    0% {
+      fill: transparent;
+      stroke: #939393;
+    }
+
+    100% {
+      fill: #fddde3;
+      stroke: #ba0517;
+    }
+  }
+}