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

package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css

@@ -1,212 +1,3 @@
-/* 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: var(--sds-g-sizing-3, 0.5rem);
-  }
-
-  :host([data-render-mode="shadow"][size='xx-small']) {
-    --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  }
-
-  :host([data-render-mode="shadow"][size='x-small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
-  }
-
-  :host([data-render-mode="shadow"][size='small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
-  }
-
-  :host([data-render-mode="shadow"][size='large']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
-  }
-
-  :host([data-render-mode="shadow"][variant='warning']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
-  }
-
-  :host([data-render-mode="shadow"][variant='success']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
-  }
-
-  :host([data-render-mode="shadow"][variant='error']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
-  }
-
-  :host([data-render-mode="shadow"][variant='light']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
-  }
-
-  :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-blockstart,
-      var(--slds-c-icon-spacing-block)
-    );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
-    --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inlinestart,
-      var(--slds-c-icon-spacing-inline)
-    );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, 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-100, #ffffff));
-    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
-    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
-  }
-
-  :host([data-render-mode="shadow"][icon-name*='action']) {
-    --slds-c-icon-spacing-block: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-spacing-inline: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-radius-border: calc(var(--sds-g-radius-border-circle, 100%) / 2);
-  }
-}
-
-/**
- * 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, var(
-      --sds-g-color-neutral-base-50, #747474))
-  );
-}
-
-:host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
-  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
-}
-
-/**
- * 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;
-}
-
-:host([data-render-mode="shadow"]) .slds-input__icon {
-  --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-
-  position: absolute;
-  top: 50%;
-  margin-block-start: -0.4375rem;
-  line-height: var(--sds-g-font-lineheight-1, 1);
-  border: 0;
-  z-index: 2;
-}
 
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
@@ -216,25 +7,25 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   :host([data-render-mode="shadow"]) [part='color-picker-button'] {
     --slds-c-icon-color-foreground: var(
       --slds-c-colorpickerbutton-color-foreground,
-      var(--sds-g-color-neutral-base-50, #747474)
+      var(--slds-g-color-on-surface-1)
     );
     --slds-c-icon-sizing: 0.875rem;
 
     vertical-align: top;
-    padding-inline: var(--slds-c-colorpickerbutton-spacing-inline, var(--sds-g-spacing-2, 0.5rem));
+    padding-inline: var(--slds-c-colorpickerbutton-spacing-inline, var(--slds-g-spacing-2));
     padding-block: var(--slds-c-colorpickerbutton-spacing-block, 0.3rem);
-    background: var(--slds-c-colorpickerbutton-color-background, var(--sds-g-color-brand-base-100, #ffffff));
+    background: var(--slds-c-colorpickerbutton-color-background, var(--slds-g-color-surface-container-1));
     line-height: 1;
-    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
-    border-color: var(--slds-c-colorpickerbutton-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
+    margin-inline-end: var(--slds-g-spacing-1);
+    border-color: var(--slds-c-colorpickerbutton-color-border, var(--slds-g-color-border-2));
     justify-content: center;
     flex-shrink: 0;
     position: relative;
     display: inline-flex;
     align-items: center;
     border-style: solid;
-    border-width: var(--slds-c-colorpickerbutton-sizing-border, var(--sds-g-sizing-border-1, 1px));
-    border-radius: var(--slds-c-colorpickerbutton-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    border-width: var(--slds-c-colorpickerbutton-sizing-border, var(--slds-g-sizing-border-1));
+    border-radius: var(--slds-c-colorpickerbutton-radius-border, var(--slds-g-radius-border-2));
     box-shadow: var(--slds-c-colorpickerbutton-shadow);
     cursor: pointer;
   }
@@ -245,13 +36,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-colorpickerbutton-color-border: var(--slds-c-colorpickerbutton-color-border-hover);
     --slds-c-colorpickerbutton-color-foreground: var(
       --slds-c-colorpickerbutton-color-foreground-hover,
-      var(--sds-g-color-brand-base-30, #014486)
+      var(--slds-g-color-accent-4)
     );
   }
   :host([data-render-mode="shadow"]) [part='color-picker-button']:focus {
     --slds-c-colorpickerbutton-shadow: var(
       --slds-c-colorpickerbutton-shadow-focus,
-      0 0 3px var(--sds-g-color-brand-base-50, #0176d3)
+      0 0 3px var(--slds-s-button-shadow-focus)
     );
 
     outline: 0;
@@ -261,11 +52,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-colorpickerbutton-color-background: var(--slds-c-colorpickerbutton-color-background-active);
     --slds-c-colorpickerbutton-color-border: var(
       --slds-c-colorpickerbutton-color-border-active,
-      var(--sds-g-color-brand-base-30, #014486)
+      var(--slds-g-color-accent-3)
     );
     --slds-c-colorpickerbutton-color-foreground: var(
       --slds-c-colorpickerbutton-color-foreground-active,
-      var(--sds-g-color-brand-base-30, #014486)
+      var(--slds-g-color-accent-4)
     );
 
     outline: 0;
@@ -276,7 +67,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     vertical-align: middle;
     height: 1.25rem;
     width: 1.25rem;
-    border-radius: var(--sds-g-radius-border-1, 0.125rem);
+    border-radius: var(--slds-g-radius-border-1);
     box-shadow: inset 0 0 1px rgb(0 0 0 / 40%);
   }
 
@@ -296,11 +87,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   :host([data-render-mode="shadow"][disabled]) [part='color-picker-button'] {
     --slds-c-colorpickerbutton-color-foreground: var(
       --slds-c-colorpickerbutton-color-foreground-disabled,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
+      var(--slds-g-color-disabled-1)
     );
 
     pointer-events: none;
-    border-color: var(--slds-c-colorpickerbutton-color-border-disabled, var(--sds-g-color-neutral-base-80, #c9c9c9));
+    border-color: var(--slds-c-colorpickerbutton-color-border-disabled, var(--slds-g-color-border-disabled-2));
   }
 
   /* TO DO: .panel and .panel-open should be renamed

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.css

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

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.js

@@ -1,12 +1,13 @@
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { Direction, AutoPosition } from 'lightning/positionLibrary';
 import { normalizeBoolean, reflectAttribute } from 'lightning/utilsPrivate';
 
 const i18n = {
     a11yTriggerText: labelA11yTriggerText,
 };
-export default class PrimitiveColorpickerButton extends LightningElement {
+export default class PrimitiveColorpickerButton extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _isColorPickerPanelOpen = false;

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.lbc.native.css

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

package/src/lightning/primitiveCustomCell/primitiveCustomCell.js

@@ -1,5 +1,4 @@
 import { LightningElement, api } from 'lwc';
-import { queryFocusable } from 'lightning/utils';
 
 export default class PrimitiveCustomCell extends LightningElement {
     @api types;
@@ -53,6 +52,6 @@ export default class PrimitiveCustomCell extends LightningElement {
 
     @api
     getActionableElements() {
-        return queryFocusable(this.template);
+        return this.template.querySelectorAll('[data-navigation="enable"]');
     }
 }

package/src/lightning/primitiveDatatableCell/primitiveDatatableCell.js

@@ -60,7 +60,7 @@ export default class PrimitiveDatatableCell extends LightningElement {
                 if (editActionElement) {
                     editActionElement.click();
                 }
-            } else if (actionableElements.length === 1) {
+            } else if (actionableElements.length >= 1) {
                 const elem = actionableElements[0];
                 let defaultActions = elem.getAttribute('data-action-triggers');
                 defaultActions = defaultActions || '';
@@ -182,8 +182,6 @@ export default class PrimitiveDatatableCell extends LightningElement {
                         } else {
                             this.moveToPrevActionableElement();
                         }
-
-                        this.moveToPrevActionableElement();
                         passThroughEvent = false;
                     }
                     break;

package/src/lightning/primitiveFileDroppableZone/primitiveFileDroppableZone.js

@@ -1,7 +1,9 @@
 import { LightningElement, api, track } from 'lwc';
-import { normalizeBoolean } from 'lightning/utilsPrivate';
+import { normalizeBoolean, isCSR } from 'lightning/utilsPrivate';
 
 export default class LightningPrimitiveFileDroppableZone extends LightningElement {
+    static validationOptOut = ['class'];
+
     @track _disabled;
     @track _multiple;
 
@@ -24,12 +26,20 @@ export default class LightningPrimitiveFileDroppableZone extends LightningElemen
     constructor() {
         super();
 
-        this.template.addEventListener('dragover', this.allowDrop.bind(this));
-        this.template.addEventListener(
-            'dragleave',
-            this.handleDragLeave.bind(this)
-        );
-        this.template.addEventListener('drop', this.handleOnDrop.bind(this));
+        if (isCSR) {
+            this.template.addEventListener(
+                'dragover',
+                this.allowDrop.bind(this)
+            );
+            this.template.addEventListener(
+                'dragleave',
+                this.handleDragLeave.bind(this)
+            );
+            this.template.addEventListener(
+                'drop',
+                this.handleOnDrop.bind(this)
+            );
+        }
     }
 
     connectedCallback() {

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

@@ -1,43 +1,54 @@
+/*******************************************
+* Imported dependency from @salesforce-ux/sds-primitives/src/sds/icon/icon.css
+*******************************************/
 /* 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
-   */
+     * 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);
+  padding-block-start: var(
+    --sds-c-icon-spacing-blockstart,
+    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  padding-block-end: var(
+    --sds-c-icon-spacing-blockend,
+    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  padding-inline-start: var(
+    --sds-c-icon-spacing-inlinestart,
+    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  padding-inline-end: var(
+    --sds-c-icon-spacing-inlineend,
+    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  border-radius: var(--sds-c-icon-radius-border, var(--sds-s-icon-radius-border));
+  border-width: var(--sds-c-icon-sizing-border, var(--sds-s-icon-sizing-border));
   border-style: solid;
-  border-color: var(--sds-c-icon-color-border, transparent);
-  background-color: var(--sds-c-icon-color-background);
-}
 
+  /* If undefined, border-color resolves to currentColor, so we need to explicitly set to transparent */
+  border-color: var(--sds-c-icon-color-border, var(--sds-s-icon-color-border, transparent));
+  background-color: var(--sds-c-icon-color-background, var(--sds-s-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);
+  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing, var(--sds-s-icon-sizing)));
+  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing, var(--sds-s-icon-sizing)));
+  color: var(--sds-c-icon-color-foreground, var(--sds-s-icon-color-foreground));
 }
-
 /**
- * Normalize svgs and control width/height with Styling Hooks
- */
-
+   * 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
@@ -46,47 +57,46 @@
  *        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: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-sizing: var(--slds-g-sizing-3);
   }
 
   :host([data-render-mode="shadow"][size='xx-small']) {
-    --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+    --slds-c-icon-sizing: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4));
   }
 
   :host([data-render-mode="shadow"][size='x-small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
+    --slds-c-icon-sizing: var(--slds-g-sizing-5);
   }
 
   :host([data-render-mode="shadow"][size='small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
+    --slds-c-icon-sizing: var(--slds-g-sizing-7);
   }
 
   :host([data-render-mode="shadow"][size='large']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
+    --slds-c-icon-sizing: var(--slds-g-sizing-10);
   }
 
   :host([data-render-mode="shadow"][variant='warning']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
+    --slds-c-icon-color-foreground: var(--slds-g-color-warning-1);
   }
 
   :host([data-render-mode="shadow"][variant='success']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-icon-color-foreground: var(--slds-g-color-success-1);
   }
 
   :host([data-render-mode="shadow"][variant='error']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
+    --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
   }
 
   :host([data-render-mode="shadow"][variant='light']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
+    --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-70);
   }
 
   :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-radius-border: var(--slds-c-icon-radius-border, var(--slds-g-radius-border-2));
     --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(
@@ -115,18 +125,17 @@
   }
 
   :host([data-render-mode="shadow"]) [part='icon'] {
-    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
-    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
-    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
+    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--slds-g-color-on-accent-1));
+    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--slds-g-sizing-9)));
+    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--slds-g-sizing-9)));
   }
 
   :host([data-render-mode="shadow"][icon-name*='action']) {
-    --slds-c-icon-spacing-block: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-spacing-inline: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-radius-border: calc(var(--sds-g-radius-border-circle, 100%) / 2);
+    --slds-c-icon-spacing-block: var(--slds-g-sizing-3);
+    --slds-c-icon-spacing-inline: var(--slds-g-sizing-3);
+    --slds-c-icon-radius-border: calc(var(--slds-g-radius-border-circle) / 2);
   }
 }
-
 /**
  * P R I V A T E
  *
@@ -135,7 +144,6 @@
  *
  * 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
@@ -147,20 +155,17 @@
  * 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, var(
-      --sds-g-color-neutral-base-50, #747474))
+      --slds-g-color-on-surface-1))
   );
 }
-
 :host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
-  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
+  fill: var(--slds-g-color-disabled-1);
 }
-
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *
@@ -168,7 +173,6 @@
  * 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;
@@ -181,7 +185,6 @@
   text-transform: none !important;
   white-space: nowrap !important;
 }
-
 /**
  * For the initial alpha version, we're hardcoding in the various unique icon styles.
  *
@@ -192,18 +195,26 @@
  *   --sds-c-icon-color-background: var(--slds-c-icon-color-background, #111);
  * }
  */
-
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
   background-color: currentcolor;
 }
-
 :host([data-render-mode="shadow"]) .slds-input__icon {
-  --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+  --slds-c-icon-sizing: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4));
 
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;
-  line-height: var(--sds-g-font-lineheight-1, 1);
+  line-height: var(--slds-g-font-lineheight-1);
   border: 0;
   z-index: 2;
 }
+:host([data-render-mode="shadow"][data-input-pill-search-primicon]) .slds-icon {
+  --sds-c-icon-sizing-height: 1.25rem;
+  --sds-c-icon-sizing-width: 1.25rem;
+}
+:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part="icon"] {
+  --sds-c-icon-color-foreground: none;
+}
+:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part="icon"]:hover {
+  --sds-c-icon-color-foreground: var(--slds-g-color-accent-4);
+}

package/src/lightning/primitiveIcon/primitiveIcon.css

@@ -1,11 +1,2 @@
-/* @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.
- https://git.soma.salesforce.com/aura/lightning-global/issues/1349
- Also prevents IE11 from gacking during some interactions
-*/
-_:-ms-lang(x), svg {
-    pointer-events: none;
-}
+@import './primitiveIcon.lbc.synthetic.css';
+@import './primitiveIcon.lbc.native.css';