lightning-base-components 1.16.8-alpha → 1.17.1-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.16.8-alpha",
+    "version": "1.17.1-alpha",
     "license": "MIT",
     "files": [
         "external",

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -1 +1 @@
-export default '240';
+export default '242';

package/scopedImports/@salesforce-label-LightningLookup.messageWhenMissingInformation.js

@@ -1 +1 @@
-export default 'This lookup field requires more data. Your Salesforce admin can help with that.';
+export default 'Review this lookup configuration. Your Salesforce admin can help with this.';

package/src/lightning/button/button.html

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

package/src/lightning/button/button.js

@@ -3,7 +3,6 @@ import { classSet } from 'lightning/utils';
 import {
     normalizeString as normalize,
     normalizeBoolean,
-    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './button.html';
@@ -13,7 +12,6 @@ import template from './button.html';
  */
 export default class LightningButton extends LightningPrimitiveButton {
     static delegatesFocus = true;
-    static shadowSupportMode = 'any';
     _normalizedVariant = 'neutral';
     _stretch = false;
 
@@ -68,8 +66,6 @@ export default class LightningButton extends LightningPrimitiveButton {
                 'success',
             ],
         });
-
-        reflectAttribute(this, 'variant', this._normalizedVariant);
     }
 
     /**
@@ -108,8 +104,6 @@ export default class LightningButton extends LightningPrimitiveButton {
     set stretch(value) {
         this._originalStretch = value;
         this._normalizedStretch = normalizeBoolean(value);
-
-        reflectAttribute(this, 'stretch', this._normalizedStretch);
     }
 
     /**
@@ -191,18 +185,6 @@ export default class LightningButton extends LightningPrimitiveButton {
         this.dispatchEvent(new CustomEvent('blur'));
     }
 
-    handleButtonClick() {
-        // In native shadow mode, parent form can't be submitted from within the
-        // shadow boundary, so we need to manually find the parent form and submit.
-        // Once TD-0118070 is delivered, we can access the parent form using `elementInternals.form`
-        if (!this.template.synthetic && this.normalizedType === 'submit') {
-            const form = this.template.host.closest('form');
-            if (form) {
-                form.requestSubmit();
-            }
-        }
-    }
-
     /**
      * Sets focus on the button.
      */
@@ -232,13 +214,7 @@ export default class LightningButton extends LightningPrimitiveButton {
      * the buttons.
      */
     connectedCallback() {
-        // Set `data-render-mode` attribute in native shadow mode
-        if (!this.template.synthetic) {
-            this.template.host.setAttribute('data-render-mode', 'shadow');
-        }
-
         if (!this._connected) {
-            reflectAttribute(this, 'variant', this._normalizedVariant);
             this._connected = true;
         }
     }
@@ -252,17 +228,8 @@ export default class LightningButton extends LightningPrimitiveButton {
     }
 
     disconnectedCallback() {
-        super.disconnectedCallback();
         this._connected = false;
     }
-
-    get computedPart() {
-        if (!this.template.synthetic) {
-            return 'button';
-        }
-
-        return undefined;
-    }
 }
 
 LightningButton.interopMap = {

package/src/lightning/buttonGroup/buttonGroup.css

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

package/src/lightning/buttonIcon/buttonIcon.css

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

package/src/lightning/buttonIconStateful/buttonIconStateful.css

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

package/src/lightning/buttonMenu/buttonMenu.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import "./dropdown.slds.css";
+/* @import 'lightning/sldsCommon';
+@import "./dropdown.slds.css"; */

package/src/lightning/buttonMenu/buttonMenu.html

@@ -11,8 +11,6 @@
         onblur={handleBlur}
         onfocus={handleFocus}
         type="button"
-        aria-controls="lgt-button-menu-dropdown"
-        id="lgt-button-menu"
         onmousedown={handleButtonMouseDown}
         tabindex={tabIndex}
         part="button button-icon">
@@ -40,10 +38,9 @@
                 <lightning-spinner size="small" alternative-text={computedLoadingStateAlternativeText}></lightning-spinner>
             </template>
             <template if:false={isLoading}>
-                <div class="slds-dropdown__list slds-dropdown_length-with-icon-10"
-                    id="lgt-button-menu-dropdown"
+                <div
+                    class="slds-dropdown__list slds-dropdown_length-with-icon-10"
                     role="menu"
-                    aria-labelledby="lgt-button-menu"
                     onprivateselect={handleMenuItemPrivateSelect}
                     onprivateblur={handlePrivateBlur}
                     onprivatefocus={handlePrivateFocus}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -772,10 +772,7 @@ export default class LightningButtonMenu extends LightningElement {
             // prevent blur during a non-blurring focus change
             // set lock so that while focusing on menutitem, menu doesnt close
             this.cancelBlur();
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            requestAnimationFrame(() => {
-                menuItem.focus();
-            });
+            menuItem.focus();
         }
         // allowBlur is called when the menu items receives focus
     }

package/src/lightning/buttonStateful/buttonStateful.css

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

package/src/lightning/card/card.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './card.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './card.slds.css'; */

package/src/lightning/carousel/carousel.html

@@ -30,7 +30,7 @@
                     >
                         <a
                             id={paginationItem.id}
-                            href="#"
+                            href="about:blank"
                             class={paginationItem.className}
                             role="tab"
                             tabindex={paginationItem.tabIndex}

package/src/lightning/colorPickerCustom/colorPickerCustom.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './color-picker-custom.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './color-picker-custom.slds.css'; */

package/src/lightning/colorPickerPanel/colorPickerPanel.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './color-picker-panel.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './color-picker-panel.slds.css'; */
 
 /* Fix for footer button centering issue, for details see: W-11543875
  *

package/src/lightning/dualListbox/dualListbox.css

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

package/src/lightning/helptext/helptext.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './help-text.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './help-text.slds.css'; */

package/src/lightning/icon/icon.css

@@ -1,2 +1,2 @@
-@import "lightning/sldsCommon";
-@import "./icon.slds.css";
+/* @import "lightning/sldsCommon";
+@import "./icon.slds.css"; */

package/src/lightning/icon/icon.js

@@ -9,7 +9,6 @@ import {
     getCategory,
     isValidName,
 } from 'lightning/iconUtils';
-
 import { normalizeVariant } from './util';
 
 /**

package/src/lightning/input/input.css

@@ -1,6 +1,6 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './input-text.slds.css';
-@import './input-checkbox.slds.css';
+@import './input-checkbox.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/primitiveBubble/primitiveBubble.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './tooltip.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './tooltip.slds.css'; */

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.css

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

package/src/lightning/primitiveIcon/primitiveIcon.css

@@ -1,6 +1,3 @@
-@import 'lightning/sldsCommon';
-@import './icon.slds.css';
-
 /*
 "Temporary" fix for Edge SVG quirk. We can remove this when it is fixed either
 at the SLDS level or at the browser level.

package/src/lightning/primitiveIcon/primitiveIcon.html

@@ -1,5 +1,5 @@
 <template>
-    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" part="icon">
+    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true">
         <use xlink:href={href}></use>
     </svg>
 </template>

package/src/lightning/primitiveIcon/primitiveIcon.js

@@ -1,16 +1,14 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import { api } from 'lwc';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 import standardTemplate from './primitiveIcon.html';
-import iconStylesheets from './primitiveIcon.css';
 
 import { getName, isValidName, polyfill } from 'lightning/iconUtils';
 import dir from '@salesforce/i18n/dir';
 import { fetchIconLibrary, hasIconLibrary, getIconLibrary } from './fetch';
 
-export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
+export default class LightningPrimitiveIcon extends LightningElement {
     @api src;
     @api svgClass;
     _size = 'medium';
@@ -25,7 +23,6 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
     }
     set size(val) {
         this._size = val;
-        this.setAttribute('size', this.normalizeSize(this._size));
     }
 
     @api
@@ -34,7 +31,6 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
     }
     set variant(val) {
         this._variant = val;
-        this.setAttribute('variant', this.normalizeVariant(this._variant));
     }
 
     @api
@@ -99,11 +95,6 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
                         this._iconLibrary[`${spriteName}_${iconName}`];
 
                     if (template) {
-                        // manually attach the stylesheets in native shadow mode
-                        if (!this.template.synthetic) {
-                            template.stylesheets = iconStylesheets;
-                        }
-
                         return template;
                     }
                 }
@@ -120,14 +111,14 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
         return getName(this.iconName);
     }
 
-    normalizeSize(val) {
-        return normalize(val, {
+    get normalizedSize() {
+        return normalize(this._size, {
             fallbackValue: 'medium',
             validValues: ['xx-small', 'x-small', 'small', 'medium', 'large'],
         });
     }
 
-    normalizeVariant(val) {
+    get normalizedVariant() {
         // NOTE: Leaving a note here because I just wasted a bunch of time
         // investigating why both 'bare' and 'inverse' are supported in
         // lightning-primitive-icon. lightning-icon also has a deprecated
@@ -135,7 +126,7 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
         // that no classes should be applied. So this component needs to
         // support both 'bare' and 'inverse' while lightning-icon only needs to
         // support 'inverse'.
-        return normalize(val, {
+        return normalize(this._variant, {
             fallbackValue: '',
             validValues: ['bare', 'error', 'inverse', 'warning', 'success'],
         });
@@ -143,12 +134,13 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
 
     get computedClass() {
         const classes = classSet(this.svgClass);
+        const { normalizedSize, normalizedVariant } = this;
 
-        if (this._variant !== 'bare') {
+        if (normalizedVariant !== 'bare') {
             classes.add('slds-icon');
         }
 
-        switch (this._variant) {
+        switch (normalizedVariant) {
             case 'error':
                 classes.add('slds-icon-text-error');
                 break;
@@ -169,8 +161,8 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
                 }
         }
 
-        if (this._size !== 'medium') {
-            classes.add(`slds-icon_${this._size}`);
+        if (normalizedSize !== 'medium') {
+            classes.add(`slds-icon_${normalizedSize}`);
         }
 
         return classes.toString();

package/src/lightning/radioGroup/radioGroup.css

@@ -1,4 +1,4 @@
-@import './input-radio-group.slds.css';
+/* @import './input-radio-group.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/spinner/spinner.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './spinner.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './spinner.slds.css'; */

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -85,6 +85,7 @@ export class Tooltip {
     _disabled = true;
     _initialized = false;
     _visible = false;
+    _isFocusEvent = false;
 
     _config = {};
 
@@ -171,7 +172,7 @@ export class Tooltip {
                 target.addEventListener(name, () => this.show())
             );
             // Unlike the tooltip in Aura, we want clicks and keys to dismiss the tooltip.
-            ['mouseleave', 'blur', 'click'].forEach((name) =>
+            ['mouseleave', 'blur', 'click', 'keydown'].forEach((name) =>
                 target.addEventListener(name, (event) =>
                     this.hideIfNotSelfCover(event)
                 )
@@ -180,34 +181,24 @@ export class Tooltip {
     }
 
     hideIfNotSelfCover(event) {
-        if (this._visible) {
-            if (
-                (event.type === 'mouseleave' &&
-                    event.clientX &&
-                    event.clientY) ||
-                event.key === 'Escape'
-            ) {
-                // In any chance, if mouseleave is caused by tooltip itself, it would means
-                // tooltip cover the target which mostly caused by dynamic resize of tooltip by CSS or JS.
-                try {
-                    const elementMouseIsOver = document.elementFromPoint
-                        ? document.elementFromPoint(
-                              event.clientX,
-                              event.clientY
-                          )
-                        : null;
-                    if (elementMouseIsOver === this._element()) {
-                        if (!isResizeObserverSupported()) {
-                            this.startPositioning();
-                        }
-                        return;
+        if (event.type === 'mouseleave' && event.clientX && event.clientY) {
+            // In any chance, if mouseleave is caused by tooltip itself, it would means
+            // tooltip cover the target which mostly caused by dynamic resize of tooltip by CSS or JS.
+            try {
+                const elementMouseIsOver = document.elementFromPoint
+                    ? document.elementFromPoint(event.clientX, event.clientY)
+                    : null;
+                if (elementMouseIsOver === this._element()) {
+                    if (!isResizeObserverSupported()) {
+                        this.startPositioning();
                     }
-                } catch (ex) {
-                    // Jest Throw Exception
+                    return;
                 }
+            } catch (ex) {
+                // Jest Throw Exception
             }
-            this.hide();
         }
+        this.hide();
     }
 
     handleDocumentTouch() {
@@ -224,7 +215,7 @@ export class Tooltip {
                 this.toggle();
             });
             ['mouseenter', 'focus'].forEach((name) =>
-                target.addEventListener(name, () => this.show())
+                target.addEventListener(name, (event) => this.show(event))
             );
             ['mouseleave', 'blur'].forEach((name) =>
                 target.addEventListener(name, (event) =>
@@ -234,7 +225,7 @@ export class Tooltip {
         }
     }
     handleEscape(e) {
-        if (e.key === 'Escape') {
+        if (e.key === 'Escape' && this._isFocusEvent) {
             e.stopPropagation();
             this.hideIfNotSelfCover(e);
         }
@@ -251,10 +242,11 @@ export class Tooltip {
         return this._resizeObserver;
     }
 
-    show() {
+    show(ev) {
         if (this._disabled) {
             return;
         }
+        this._isFocusEvent = ev && (ev.type === 'focus' ? true : false);
 
         this._visible = true;
         const tooltip = this._element();

package/src/lightning/utilsPrivate/url.js

@@ -11,14 +11,29 @@ export function makeAbsoluteUrl(url) {
 
 export const FALLBACK_URL = 'about:blank';
 const IS_SCRIPT_OR_DATA = /^(?:\w+script|data):/i;
+const IS_HTML_ENTITY = /&#(\w+)(^\w|;)?/g;
+const htmlCtrlEntityRegex = /&(newline|tab);/gi;
+const ctrlCharactersRegex =
+    // eslint-disable-next-line no-control-regex
+    /[\u0000-\u001F\u007F-\u009F\u2000-\u200D\uFEFF]/gim;
 
+function decodeHtmlCharacters(str) {
+    return str.replace(IS_HTML_ENTITY, (match, dec) => {
+        return String.fromCharCode(dec);
+    });
+}
 /**
  * Mark sure to preventDefault, when sanitized url matches FALLBACK_URL
  * W-12029667 - Making FALLBACK_URL as '#' causes click action to fail on tests
  * */
 export function sanitizeURL(url) {
     if (url) {
-        return url.match(IS_SCRIPT_OR_DATA) ? FALLBACK_URL : url;
+        // remove html entity characters from url
+        const sanitizedUrl = decodeHtmlCharacters(url)
+            .replace(htmlCtrlEntityRegex, '')
+            .replace(ctrlCharactersRegex, '')
+            .trim();
+        return sanitizedUrl.match(IS_SCRIPT_OR_DATA) ? FALLBACK_URL : url;
     }
     return FALLBACK_URL;
 }

package/src/lightning/ariaObserver/__component__/ariaObserver.spec.js

@@ -1,112 +0,0 @@
-import { createElement } from 'lwc';
-import AriaObserverContainer from 'lightningtest/ariaObserverContainer';
-
-function createTestElement(props = {}) {
-    const element = createElement('lightningtest-aria-observer-container', {
-        is: AriaObserverContainer,
-    });
-    Object.assign(element, props);
-    document.body.appendChild(element);
-
-    return element;
-}
-
-describe('AriaObserver', () => {
-    if (process.env.NATIVE_SHADOW) {
-        describe('native shadow', () => {
-            it('should copy the label content over and set aria-labelledby to be the internal label element', () => {
-                const container = createTestElement();
-                const testElement = container.testElement;
-
-                expect(container.labelContent).toEqual(
-                    testElement.labelContent
-                );
-            });
-
-            it('should react to label id changes', async () => {
-                const container = createTestElement();
-                const oldLabelContent = container.labelContent;
-
-                container.updateAriaLabelledby('alt-label-id');
-                await Promise.resolve();
-
-                const testElement = container.testElement;
-
-                expect(container.labelContent).not.toEqual(oldLabelContent);
-                expect(container.labelContent).toEqual(
-                    testElement.labelContent
-                );
-            });
-
-            it('should work with multiple label ids', async () => {
-                const container = createTestElement();
-                container.updateAriaLabelledby('id-label alt-label-id');
-                await Promise.resolve();
-
-                const testElement = container.testElement;
-                expect(testElement.labelContent).toEqual('Foo\nBar');
-            });
-
-            it('should work with label ids appearing in the opposite of document order', async () => {
-                const container = createTestElement();
-                container.updateAriaLabelledby('alt-label-id id-label');
-                await Promise.resolve();
-
-                const testElement = container.testElement;
-                expect(testElement.labelContent).toEqual('Bar\nFoo');
-            });
-
-            it('should update the internal label content when external content changes', async () => {
-                const container = createTestElement();
-                container.updateLabelContent();
-
-                // wait for component rehydration
-                await Promise.resolve();
-                // wait for mutation observer callback
-                await Promise.resolve();
-
-                const testElement = container.testElement;
-                expect(container.labelContent).toEqual(
-                    testElement.labelContent
-                );
-            });
-        });
-    } else {
-        describe('synthetic shadow', () => {
-            it('should set aria-labelledby to be the external label id', () => {
-                const container = createTestElement();
-                const testElement = container.testElement;
-
-                expect(container.labelId).toEqual(testElement.labelId);
-            });
-
-            it('should react to label id changes', async () => {
-                const container = createTestElement();
-                const oldLabelId = container.labelId;
-
-                container.updateAriaLabelledby('alt-label-id');
-                await Promise.resolve();
-
-                const testElement = container.testElement;
-
-                expect(container.labelId).not.toEqual(oldLabelId);
-                expect(container.labelId).toEqual(testElement.labelId);
-            });
-
-            it('should keep the label id unchanged when the label content changes', async () => {
-                const container = createTestElement();
-                container.updateLabelContent();
-                await Promise.resolve();
-
-                const testElement = container.testElement;
-                expect(container.labelId).toEqual(testElement.labelId);
-            });
-
-            it('should keep track of the live id', () => {
-                const container = createTestElement();
-                const testElement = container.testElement;
-                expect(testElement.labelId).toEqual(testElement.liveId);
-            });
-        });
-    }
-});

package/src/lightning/button/button.css

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

package/src/lightning/button/button.slds.css

@@ -1,425 +0,0 @@
-/* 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"]:focus) {
-  outline: 0;
-}
-
-:host([data-render-mode="shadow"]) [part~='button'] {
-  display: inline-flex;
-  position: relative;
-  background: none;
-  background-color: var(--sds-c-button-color-background, var(--sds-s-button-color-background, transparent));
-  background-clip: border-box;
-  color: var(--sds-c-button-text-color, var(--sds-s-button-text-color, inherit));
-  padding-left: var(
-    --sds-c-button-spacing-inline-start,
-    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
-  );
-  padding-right: var(
-    --sds-c-button-spacing-inline-end,
-    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
-  );
-  padding-top: var(
-    --sds-c-button-spacing-block-start,
-    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
-  );
-  padding-bottom: var(
-    --sds-c-button-spacing-block-start,
-    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
-  );
-  border-width: var(--sds-c-button-sizing-border, var(--sds-s-button-sizing-border, 1px));
-  border-style: solid;
-  border-color: var(--sds-c-button-color-border, var(--sds-s-button-color-border, transparent));
-  border-start-start-radius: var(
-    --sds-c-button-radius-border-startstart,
-    var(
-      --sds-c-button-radius-border,
-      var(
-        --sds-s-button-radius-border-startstart,
-        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-      )
-    )
-  );
-  border-start-end-radius: var(
-    --sds-c-button-radius-border-startend,
-    var(
-      --sds-c-button-radius-border,
-      var(
-        --sds-s-button-radius-border-startend,
-        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-      )
-    )
-  );
-  border-end-start-radius: var(
-    --sds-c-button-radius-border-endstart,
-    var(
-      --sds-c-button-radius-border,
-      var(
-        --sds-s-button-radius-border-endstart,
-        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-      )
-    )
-  );
-  border-end-end-radius: var(
-    --sds-c-button-radius-border-endend,
-    var(
-      --sds-c-button-radius-border,
-      var(
-        --sds-s-button-radius-border-endend,
-        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-      )
-    )
-  );
-  box-shadow: var(--sds-c-button-shadow, var(--sds-s-button-shadow));
-  width: var(--sds-c-button-sizing-width);
-
-  /* this line height hook is incorrect but is used in core - need to get teams to change */
-  /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
-  line-height: var(--sds-c-button-line-height);
-  white-space: normal;
-  user-select: none;
-  align-items: center;
-  text-decoration: var(--sds-c-button-font-decoration, none);
-  appearance: none;
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:hover {
-  --sds-c-button-text-color: var(
-    --sds-c-button-text-color-hover,
-    var(--sds-s-button-text-color-hover, #0176d3)
-  );
-  --sds-c-button-color-background: var(
-    --sds-c-button-color-background-hover,
-    var(--sds-s-button-color-background-hover)
-  );
-  --sds-c-button-color-border: var(--sds-c-button-color-border-hover, var(--sds-s-button-color-border-hover));
-
-  cursor: pointer;
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:focus {
-  --sds-c-button-color-background: var(
-    --sds-c-button-color-background-focus,
-    var(--sds-s-button-color-background-focus)
-  );
-  --sds-c-button-color-border: var(
-    --sds-c-button-color-border-focus,
-    var(--sds-s-button-color-border-focus, #0176d3)
-  );
-  --sds-c-button-text-color: var(
-    --sds-c-button-text-color-focus,
-    var(--sds-s-button-text-color-focus, #0176d3)
-  );
-  --sds-c-button-shadow: var(--sds-c-button-shadow-focus, var(--sds-s-button-shadow-focus, #0176d3 0 0 3px));
-
-  outline: 0;
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:active {
-  --sds-c-button-text-color: var(
-    --sds-c-button-text-color-active,
-    var(--sds-s-button-text-color-active, currentColor)
-  );
-  --sds-c-button-color-background: var(
-    --sds-c-button-color-background-active,
-    var(--sds-s-button-color-background-active)
-  );
-  --sds-c-button-color-border: var(
-    --sds-c-button-color-border-active,
-    var(--sds-s-button-color-border-active, #0176d3)
-  );
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:disabled {
-  --sds-c-button-text-color: var(--sds-c-button-text-color-disabled, #939393);
-  --sds-c-button-color-background: var(--sds-c-button-color-background-disabled);
-  --sds-c-button-color-border: var(--sds-c-button-color-border-disabled);
-
-  pointer-events: none;
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:disabled * {
-  pointer-events: none;
-}
-
-/* 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: '') {
-  /**
-   * LBC default is the 'neutral' variant.
-   *
-   * We retain the 'neutral' variant in the hook names for interoperability
-   * with SLDS light DOM blueprints which do explicitly define a 'neutral'
-   * variant which is not the default.
-   *
-   * See 'base' variant below.
-   *
-   */
-
-  :host([data-render-mode="shadow"]) [part='button'] {
-    /* slds-icon mapping */
-    --slds-c-icon-sizing-border: 0;
-    --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
-
-    --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
-    --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
-
-    /* Border radius - shared */
-    --sds-c-button-radius-border-startstart: var(
-      --slds-c-button-neutral-radius-border-startstart,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
-      )
-    );
-    --sds-c-button-radius-border-endstart: var(
-      --slds-c-button-radius-border-endstart,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
-      )
-    );
-    --sds-c-button-radius-border-startend: var(
-      --slds-c-button-radius-border-startend,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
-      )
-    );
-    --sds-c-button-radius-border-endend: var(
-      --slds-c-button-radius-border-endend,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
-      )
-    );
-
-    /* Background color */
-    --sds-c-button-color-background: var(
-      --slds-c-button-neutral-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-button-color-background-hover: var(
-      --slds-c-button-neutral-color-background-hover,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --sds-c-button-color-background-focus: var(
-      --slds-c-button-neutral-color-background-focus,
-      var(--sds-c-button-color-background-hover)
-    );
-    --sds-c-button-color-background-active: var(
-      --slds-c-button-neutral-color-background-active,
-      var(--sds-g-color-neutral-base-90, #e5e5e5)
-    );
-
-    /* Border color */
-    --sds-c-button-color-border: var(
-      --slds-c-button-neutral-color-border,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --sds-c-button-color-border-hover: var(
-      --slds-c-button-neutral-color-border-hover,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --sds-c-button-color-border-focus: var(
-      --slds-c-button-neutral-color-border-focus,
-      var(--sds-c-button-color-border-hover)
-    );
-    --sds-c-button-color-border-active: var(--slds-c-button-neutral-color-border-active);
-
-    /* Text color */
-    --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--sds-g-color-brand-base-40, #0b5cab));
-    --sds-c-button-text-color-hover: var(
-      --slds-c-button-neutral-text-color-hover,
-      var(--sds-g-color-brand-base-10, #001639)
-    );
-    --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus);
-    --sds-c-button-text-color-active: var(
-      --slds-c-button-neutral-text-color-active,
-      var(--sds-g-color-brand-base-10, #001639)
-    );
-
-    /* Shadow */
-    --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
-    --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
-
-    /* Disabled */
-    --sds-c-button-color-border-disabled: var(
-      --slds-c-button-neutral-color-border-disabled,
-      var(--sds-g-color-neutral-base-90, #e5e5e5)
-    );
-    --sds-c-button-text-color-disabled: var(--slds-c-button-neutral-text-color-disabled);
-    --sds-c-button-color-background-disabled: var(--slds-c-button-neutral-color-background-disabled);
-  }
-
-  :host([data-render-mode="shadow"][variant='brand'])::part(button) {
-    --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
-    --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
-    --sds-c-button-color-background: var(
-      --slds-c-button-brand-color-background,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-    --sds-c-button-color-border: var(--slds-c-button-brand-color-border, var(--sds-g-color-brand-base-50, #0176d3));
-    --sds-c-button-color-border-hover: var(
-      --slds-c-button-brand-color-border-hover,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --sds-c-button-color-border-focus: var(
-      --slds-c-button-brand-color-border-focus,
-      var(--slds-c-button-brand-color-border-hover)
-    );
-    --sds-c-button-color-border-active: var(
-      --slds-c-button-brand-color-border-active,
-      var(--slds-c-button-brand-color-background-active)
-    );
-    --sds-c-button-text-color: var(--slds-c-button-brand-text-color, var(--sds-g-color-brand-base-100, #ffffff));
-    --sds-c-button-color-background-hover: var(
-      --slds-c-button-brand-color-background-hover,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --sds-c-button-color-background-focus: var(
-      --slds-c-button-brand-color-background-focus,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --sds-c-button-color-background-active: var(
-      --slds-c-button-brand-color-background-active,
-      var(--sds-g-color-brand-base-10, #001639)
-    );
-    --sds-c-button-text-color-hover: var(
-      --slds-c-button-brand-text-color-hover,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --sds-c-button-text-color-active: var(
-      --slds-c-button-brand-text-color-active,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --sds-c-button-text-color-focus: var(
-      --slds-c-button-brand-text-color-focus,
-      var(--slds-c-button-brand-text-color-hover)
-    );
-    --sds-c-button-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --sds-c-button-color-border-disabled: var(--sds-c-button-color-background-disabled);
-    --sds-c-button-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
-  }
-
-  :host([data-render-mode="shadow"][variant='brand-outline'])::part(button) {
-    --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
-    --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
-    --sds-c-button-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
-    --sds-c-button-color-border: var(--sds-g-color-brand-base-50, #0176d3);
-    --sds-c-button-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
-    --sds-c-button-color-border-hover: var(--sds-g-color-brand-base-50, #0176d3);
-    --sds-c-button-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --sds-c-button-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --sds-c-button-color-background-active: var(--sds-g-color-neutral-base-90, #e5e5e5);
-    --sds-c-button-text-color-hover: var(--sds-g-color-brand-base-40, #0b5cab);
-    --sds-c-button-text-color-active: var(--sds-g-color-brand-base-40, #0b5cab);
-    --sds-c-button-color-border-disabled: var(--sds-g-color-neutral-base-90, #e5e5e5);
-  }
-
-  :host([data-render-mode="shadow"][variant='inverse'])::part(button) {
-    --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
-    --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
-    --sds-c-button-color-background: transparent;
-    --sds-c-button-color-background-hover: var(--sds-g-color-neutral-base-100, #ffffff);
-    --sds-c-button-color-background-focus: var(--sds-g-color-neutral-base-100, #ffffff);
-    --sds-c-button-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --sds-c-button-color-border: var(--sds-g-color-brand-base-100, #ffffff);
-    --sds-c-button-text-color: var(--sds-g-color-brand-base-100, #ffffff);
-    --sds-c-button-text-color-hover: var(--sds-g-color-brand-base-50, #0176d3);
-    --sds-c-button-text-color-active: var(--sds-g-color-brand-base-50, #0176d3);
-    --sds-c-button-color-border-hover: var(--sds-g-color-brand-base-100, #ffffff);
-    --sds-c-button-color-border-disabled: var(--sds-g-color-neutral-base-60, #939393);
-  }
-
-  :host([data-render-mode="shadow"][variant='destructive'])::part(button) {
-    --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
-    --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
-    --sds-c-button-color-background: var(--sds-g-color-error-base-40, #ba0517);
-    --sds-c-button-color-border: var(--sds-g-color-error-base-40, #ba0517);
-    --sds-c-button-color-border-hover: var(--sds-g-color-error-base-40, #ba0517);
-    --sds-c-button-text-color: var(--sds-g-color-error-base-100, #ffffff);
-    --sds-c-button-color-background-hover: var(--sds-g-color-error-base-30, #8e030f);
-    --sds-c-button-color-background-focus: var(--sds-g-color-error-base-30, #8e030f);
-    --sds-c-button-color-background-active: var(--sds-g-color-error-base-20, #640103);
-    --sds-c-button-text-color-hover: var(--sds-g-color-error-base-100, #ffffff);
-    --sds-c-button-text-color-active: var(--sds-g-color-error-base-100, #ffffff);
-    --sds-c-button-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --sds-c-button-color-border-disabled: var(--sds-c-button-color-background-disabled);
-    --sds-c-button-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
-  }
-
-  :host([data-render-mode="shadow"][variant='success'])::part(button) {
-    --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
-    --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
-    --sds-c-button-color-background: var(--sds-g-color-success-base-50, #2e844a);
-    --sds-c-button-color-border: var(--sds-g-color-success-base-50, #2e844a);
-    --sds-c-button-color-border-hover: var(--sds-g-color-success-base-50, #2e844a);
-    --sds-c-button-text-color: var(--sds-g-color-success-base-100, #ffffff);
-    --sds-c-button-color-background-hover: var(--sds-g-color-success-base-40, #22683e);
-    --sds-c-button-color-background-focus: var(--sds-g-color-success-base-40, #22683e);
-    --sds-c-button-color-background-active: var(--sds-g-color-success-base-30, #194e31);
-    --sds-c-button-text-color-hover: var(--sds-g-color-success-base-100, #ffffff);
-    --sds-c-button-text-color-active: var(--sds-g-color-success-base-100, #ffffff);
-    --sds-c-button-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --sds-c-button-color-border-disabled: var(--sds-c-button-color-background-disabled);
-    --sds-c-button-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
-  }
-
-  :host([data-render-mode="shadow"][variant='destructive-text'])::part(button) {
-    --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
-    --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
-    --sds-c-button-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
-    --sds-c-button-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --sds-c-button-text-color: var(--sds-g-color-error-base-50, #ea001e);
-    --sds-c-button-color-border-hover: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --sds-c-button-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --sds-c-button-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --sds-c-button-color-background-active: var(--sds-g-color-neutral-base-90, #e5e5e5);
-    --sds-c-button-text-color-hover: var(--sds-g-color-error-base-40, #ba0517);
-    --sds-c-button-text-color-active: var(--sds-g-color-error-base-40, #ba0517);
-    --sds-c-button-color-border-disabled: var(--sds-g-color-neutral-base-90, #e5e5e5);
-  }
-
-  /**
-   * 'base' variant is not the default in LBC. It is the default in the light
-   * DOM version of SLDS.
-   *
-   * So even though this is a non-default variant in this context, the hooks
-   * for this variant are written as the default for interoperability with
-   * SLDS light DOM.
-   *
-   * E.g. --slds-c-button-color-background
-   */
-  :host([data-render-mode="shadow"][variant='base'])::part(button),:host([data-render-mode="shadow"][variant='text'])::part(button) {
-    --sds-c-button-spacing-inline: 0.25rem;
-    --sds-c-button-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
-    --sds-c-button-color-border: transparent;
-    --sds-c-button-color-border-hover: transparent;
-    --sds-c-button-color-border-focus: transparent;
-    --sds-c-button-color-background-hover: transparent;
-    --sds-c-button-color-background-active: transparent;
-  }
-
-  :host([data-render-mode="shadow"][stretch])::part(button) {
-    --sds-c-button-width: 100%;
-  }
-
-  /* center button except on base/text variant */
-  :host(:not([variant='base'], [variant='text']))::part(button) {
-    justify-content: center;
-  }
-
-  :host([data-render-mode="shadow"])::part(start) {
-    display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-  }
-
-  :host([data-render-mode="shadow"])::part(end) {
-    display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
-  }
-}

package/src/lightning/primitiveIcon/icon.slds.css

@@ -1,197 +0,0 @@
-/* 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"]) {
-  /**
-   * Establish independent formatting context, we don't want ancestor rules affecting our layout.
-   * This assumes there will not be a direct, child inline-level element.
-   * See https://www.w3.org/TR/css-display-3/#establish-an-independent-formatting-context
-   */
-  display: inline-flex;
-}
-
-:host([data-render-mode="shadow"]) [part~='boundary'] {
-  padding-block-start: var(--sds-c-icon-spacing-block-start, var(--sds-c-icon-spacing));
-  padding-block-end: var(--sds-c-icon-spacing-block-end, var(--sds-c-icon-spacing));
-  padding-inline-start: var(--sds-c-icon-spacing-inline-start, var(--sds-c-icon-spacing));
-  padding-inline-end: var(--sds-c-icon-spacing-inline-end, var(--sds-c-icon-spacing));
-  border-radius: var(--sds-c-icon-radius-border);
-  border-width: var(--sds-c-icon-sizing-border, 1px);
-  border-style: solid;
-  border-color: var(--sds-c-icon-color-border, transparent);
-  background-color: var(--sds-c-icon-color-background);
-}
-
-:host([data-render-mode="shadow"]) [part~='icon'] {
-  display: flex; /* See line #5 */
-  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing));
-  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing));
-  color: var(--sds-c-icon-color-foreground);
-}
-
-/**
- * Normalize svgs and control width/height with Styling Hooks
- */
-
-:host([data-render-mode="shadow"]) svg {
-  width: 100%;
-  height: 100%;
-}
-
-/**
- * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
- *        fallbacks, styles will regress due to invalid CSS variables from
- *        missing SLDS shared and globals.
- *
- *        Additionally, LBC are currently relying on 'part' attributes to
- *        receive styling. Authoring styles that rely on slots is not recommended.
- */
-
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
-    --slds-c-icon-sizing: 0.5rem;
-  }
-
-  :host([data-render-mode="shadow"][size~='xx-small']) {
-    --slds-c-icon-sizing: 0.875rem;
-  }
-
-  :host([data-render-mode="shadow"][size~='x-small']) {
-    --slds-c-icon-sizing: 1rem;
-  }
-
-  :host([data-render-mode="shadow"][size~='small']) {
-    --slds-c-icon-sizing: 1.5rem;
-  }
-
-  :host([data-render-mode="shadow"][size~='large']) {
-    --slds-c-icon-sizing: 3rem;
-  }
-
-  :host([data-render-mode="shadow"][variant~='warning']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-4);
-  }
-
-  :host([data-render-mode="shadow"][variant~='success']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-contrast-1);
-  }
-
-  :host([data-render-mode="shadow"][variant~='error']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-contrast-1);
-  }
-
-  :host([data-render-mode="shadow"][variant~='light']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-contrast-1);
-  }
-
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
-    /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
-    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
-    --sds-c-icon-color-border: var(--slds-c-icon-color-border);
-    --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
-      var(--slds-c-icon-spacing-block)
-    );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
-    --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
-      var(--slds-c-icon-spacing-inline)
-    );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
-
-    /**
-     * There's a divergence in LBC that we have to support here: LBC splits their
-     * icon implementation into two components: lightning-icon and lightning-primitive-icon.
-     * slds-icon is consumed within both with no issues except that the presence of an
-     * additional custom element (primitive-icon) creates an unexpected inline-level
-     * element and breaks our formatting context. tl;dr, we have to reset the formatting
-     * context of the boundary or else we'll inherit line-height from an ancestor and
-     * get visual regressions.
-     *
-     * If lightning-icon is refactored into a single component, this line can be removed.
-     */
-    display: inline-flex;
-  }
-
-  :host([data-render-mode="shadow"]) [part~='icon'] {
-    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-1));
-    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, 2rem));
-    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, 2rem));
-  }
-
-  :host([data-render-mode="shadow"][icon-name*='action']) {
-    --slds-c-icon-spacing-block: 0.5rem;
-    --slds-c-icon-spacing-inline: 0.5rem;
-    --slds-c-icon-radius-border: 50%;
-  }
-}
-
-/**
- * P R I V A T E
- *
- * The following styling is implemented by classes within the shadow DOM.
- * They're expected to be private to the component and not for external use.
- *
- * See notes for each class for the rationale behind their inclusion.
- */
-
-/**
- * Utility icons traditionally added a class to change the default foreground
- * color (white) to a grey. This was done implicitly whereas other color changes
- * were done explicitly through the 'variant' attribute. So this is an outlier
- * to the overall pattern. Leaving it as-is since an update would require an
- * API change or more investigating.
- *
- * This is a hybrid patch between synthetic and native shadow. The ideal final
- * outcome is the removal of this class and the default utility styling would
- * be implemented through an attribute or some other class-less solution.
- */
-
-:host([data-render-mode="shadow"]) .slds-icon-text-default {
-  /*! @css-var-fallback fill */
-  --slds-c-icon-color-foreground: var(
-    --slds-c-icon-color-foreground-default,
-    var(--sds-c-icon-color-foreground-default, #706e6b)
-  );
-}
-
-:host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
-  fill: #dddbda;
-}
-
-/**
- * A temporarily baked-in utility class until SLDS gets a proper utility package.
- *
- * This is a hybrid patch between synthetic and native shadow. The ideal final
- * outcome is the removal of this class and replacing the class with the SLDS
- * utility package solution.
- */
-
-: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;
-}
-
-/**
- * For the initial alpha version, we're hardcoding in the various unique icon styles.
- *
- * Next version, we want to dynamically generate these from legacy SLDS with the
- * following design pattern:
- *
- * [type="action"][icon-name="approval"] {
- *   --sds-c-icon-color-background: var(--slds-c-icon-color-background, #111);
- * }
- */
-
-:host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
-}