lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/primitiveCellCheckbox/input-checkbox.slds.css

@@ -162,32 +162,32 @@
      * Base
      */
 :host([data-render-mode="shadow"]) [part='input-checkbox'] {
-    /**
+  /**
       * Remap to SLDS blueprint hooks for parity
       * https://www.lightningdesignsystem.com/components/checkbox/#Styling-Hooks-Overview
       */
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    --_slds-c-inputcheckbox-shadow: var(--slds-c-checkbox-shadow);
-    --_slds-c-inputcheckbox-shadow-focus: var(--slds-c-checkbox-shadow-focus);
-    --_slds-c-inputcheckbox-color-background: var(--slds-c-checkbox-color-background);
-    --_slds-c-inputcheckbox-color-background-checked: var(--slds-c-checkbox-color-background-checked);
-    --_slds-c-inputcheckbox-color-border: var(--slds-c-checkbox-color-border);
-    --_slds-c-inputcheckbox-color-border-checked: var(--slds-c-checkbox-color-border-checked);
-    --_slds-c-inputcheckbox-color-border-focus: var(--slds-c-checkbox-color-border-focus);
-    --_slds-c-inputcheckbox-mark-color-foreground: var(--slds-c-checkbox-mark-color-foreground);
-    --_slds-c-inputcheckbox-radius-border: var(--slds-c-checkbox-radius-border);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+  --_slds-c-inputcheckbox-shadow: var(--slds-c-checkbox-shadow);
+  --_slds-c-inputcheckbox-shadow-focus: var(--slds-c-checkbox-shadow-focus);
+  --_slds-c-inputcheckbox-color-background: var(--slds-c-checkbox-color-background);
+  --_slds-c-inputcheckbox-color-background-checked: var(--slds-c-checkbox-color-background-checked);
+  --_slds-c-inputcheckbox-color-border: var(--slds-c-checkbox-color-border);
+  --_slds-c-inputcheckbox-color-border-checked: var(--slds-c-checkbox-color-border-checked);
+  --_slds-c-inputcheckbox-color-border-focus: var(--slds-c-checkbox-color-border-focus);
+  --_slds-c-inputcheckbox-mark-color-foreground: var(--slds-c-checkbox-mark-color-foreground);
+  --_slds-c-inputcheckbox-radius-border: var(--slds-c-checkbox-radius-border);
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
 
-    /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
-    display: flex;
-  }
+  /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
+  display: flex;
+}
 /**
      * Label Container
      */
 :host([data-render-mode="shadow"]) [part='label-container'] {
-    /* Accounts for help-text in same row as label */
-    padding-inline-end: var(--slds-g-spacing-1);
-  }
+  /* Accounts for help-text in same row as label */
+  padding-inline-end: var(--slds-g-spacing-1);
+}
 /**
      * Label
      *
@@ -195,27 +195,27 @@
      * avoid collisions with other components using [part='label'] (e.g. slds-input-text)
      */
 :host([data-render-mode="shadow"]) [part='input-checkbox'] [part='label'] {
-    color: var(--_slds-c-inputcheckbox-label-color, var(--slds-g-color-on-surface-2));
-    margin-block-end: 0;
-    padding-block-start: calc(var(--slds-g-spacing-1) / 2);
-    padding-inline-start: var(--slds-g-spacing-2);
-  }
+  color: var(--_slds-c-inputcheckbox-label-color, var(--slds-g-color-on-surface-2));
+  margin-block-end: 0;
+  padding-block-start: calc(var(--slds-g-spacing-1) / 2);
+  padding-inline-start: var(--slds-g-spacing-2);
+}
 /**
      * Checkbox
      *
      * Hidden from view, see Indicator for visual faux checkbox.
      */
 :host([data-render-mode="shadow"]) [part='checkbox'] {
-    width: 1px;
-    height: 1px;
-    border: 0;
-    clip: rect(0 0 0 0);
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    pointer-events: auto;
-  }
+  width: 1px;
+  height: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  pointer-events: auto;
+}
 /**
      * Checkbox Indicator
      *
@@ -231,130 +231,136 @@
      * + LBC uses a styled <span>. Due to this divergence, we require custom CSS.
      */
 :host([data-render-mode="shadow"]) [part='indicator'] {
-    display: inline-block;
-    position: relative;
-    width: 1rem;
-    height: 1rem;
-    border-radius: var(--_slds-c-inputcheckbox-radius-border, var(--slds-g-radius-border-1));
-    border: var(--_slds-c-inputcheckbox-sizing-border, var(--slds-g-sizing-border-1)) solid
-      var(--_slds-c-inputcheckbox-color-border, var(--slds-g-color-border-2));
-    background-color: var(--_slds-c-inputcheckbox-color-background, var(--slds-g-color-surface-container-1));
-    box-shadow: var(--_slds-c-inputcheckbox-shadow);
-    transition: border 0.1s linear, background-color 0.1s linear;
-    vertical-align: middle;
-  }
+  display: inline-block;
+  position: relative;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--_slds-c-inputcheckbox-radius-border, var(--slds-g-radius-border-1));
+  border: var(--_slds-c-inputcheckbox-sizing-border, var(--slds-g-sizing-border-1)) solid
+    var(--_slds-c-inputcheckbox-color-border, var(--slds-g-color-border-2));
+  background-color: var(--_slds-c-inputcheckbox-color-background, var(--slds-g-color-surface-container-1));
+  box-shadow: var(--_slds-c-inputcheckbox-shadow);
+  transition:
+    border 0.1s linear,
+    background-color 0.1s linear;
+  vertical-align: middle;
+}
 /**
      * Checked
      */
 :host([data-render-mode="shadow"][checked]) [part='indicator']::after {
-    content: '';
-    height: calc(1rem / 4);
-    width: calc(1rem / 2);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
-    border-bottom: 2px solid
-      var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
-    border-left: 2px solid var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
-  }
+  content: '';
+  height: calc(1rem / 4);
+  width: calc(1rem / 2);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
+  border-bottom: 2px solid
+    var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
+  border-left: 2px solid
+    var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
+}
 :host([data-render-mode="shadow"][checked]) [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-checked);
-    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-checked);
-  }
+  --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-checked);
+  --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-checked);
+}
 /**
      * Disabled
      */
 :host([data-render-mode="shadow"][disabled]) [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(
-      --_slds-c-inputcheckbox-color-background-disabled,
-      var(--slds-g-color-disabled-container-2)
-    );
-    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-disabled, var(--slds-g-color-border-disabled-1));
-    --_slds-c-inputcheckbox-mark-color-foreground: var(
-      --_slds-c-inputcheckbox-mark-color-foreground-disabled,
-      var(--slds-g-color-on-disabled-2)
-    );
-  }
+  --_slds-c-inputcheckbox-color-background: var(
+    --_slds-c-inputcheckbox-color-background-disabled,
+    var(--slds-g-color-disabled-container-2)
+  );
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-disabled,
+    var(--slds-g-color-border-disabled-1)
+  );
+  --_slds-c-inputcheckbox-mark-color-foreground: var(
+    --_slds-c-inputcheckbox-mark-color-foreground-disabled,
+    var(--slds-g-color-on-disabled-2)
+  );
+}
 /**
      * Focused
      */
 :host(:not([disabled])) input:focus-within + .slds-checkbox__label [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
-    --_slds-c-inputcheckbox-color-border: var(
-      --_slds-c-inputcheckbox-color-border-focus,
-      var(--slds-g-color-accent-2)
-    );
-    --_slds-c-inputcheckbox-shadow: var(
-      --_slds-c-inputcheckbox-shadow-focus,
-      0 0 3px var(--slds-g-color-accent-2)
-    );
-  }
+  --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-focus,
+    var(--slds-g-color-accent-2)
+  );
+  --_slds-c-inputcheckbox-shadow: var(
+    --_slds-c-inputcheckbox-shadow-focus,
+    0 0 3px var(--slds-g-color-accent-2)
+  );
+}
 /**
      * Invalid
      */
 :host([data-render-mode="shadow"][invalid]) [part='indicator'] {
-    --_slds-c-inputcheckbox-sizing-border: var(
-      --_slds-c-inputcheckbox-sizing-border-invalid,
-      var(--slds-g-sizing-border-2)
-    );
-    --_slds-c-inputcheckbox-color-border: var(
-      --_slds-c-inputcheckbox-color-border-invalid,
-      var(--slds-g-color-border-error-1)
-    );
-    --_slds-c-inputcheckbox-mark-color-foreground: var(
-      --_slds-c-inputcheckbox-mark-color-foreground-invalid,
-      var(--slds-g-color-error-1)
-    );
-  }
+  --_slds-c-inputcheckbox-sizing-border: var(
+    --_slds-c-inputcheckbox-sizing-border-invalid,
+    var(--slds-g-sizing-border-2)
+  );
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-invalid,
+    var(--slds-g-color-border-error-1)
+  );
+  --_slds-c-inputcheckbox-mark-color-foreground: var(
+    --_slds-c-inputcheckbox-mark-color-foreground-invalid,
+    var(--slds-g-color-error-1)
+  );
+}
 :host([data-render-mode="shadow"][invalid]) [part='help-text'] {
-    color: var(--_slds-c-inputcheckbox-helptext-color-invalid, var(--slds-g-color-error-1));
-  }
+  color: var(--_slds-c-inputcheckbox-helptext-color-invalid, var(--slds-g-color-error-1));
+}
 /**
      * Label Inline Variant
      *
      * @TODO: Remove magic number for MQ
      */
 @media (width >= 48em) {
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
-      float: left;
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
+    float: left;
 
-      /* TODO: Get rid of these magic numbers */
-      max-width: calc(33% - 1.125rem);
-      padding-block-start: var(--slds-g-spacing-1);
-      padding-inline-start: var(--slds-g-spacing-1);
-    }
+    /* TODO: Get rid of these magic numbers */
+    max-width: calc(33% - 1.125rem);
+    padding-block-start: var(--slds-g-spacing-1);
+    padding-inline-start: var(--slds-g-spacing-1);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
-      display: block;
-      margin-inline-start: 33%;
-      padding-block: var(--slds-g-spacing-1);
-      margin-block-end: var(--slds-g-spacing-2);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
+    display: block;
+    margin-inline-start: 33%;
+    padding-block: var(--slds-g-spacing-1);
+    margin-block-end: var(--slds-g-spacing-2);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
-      float: left;
-      padding-block-start: var(--slds-g-spacing-1);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
+    float: left;
+    padding-block-start: var(--slds-g-spacing-1);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
-      /* @TODO: add change to SDS, removes line-height from display inline */
-      display: block;
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
+    /* @TODO: add change to SDS, removes line-height from display inline */
+    display: block;
   }
+}
 /**
      * Standalone Checkbox
      *
      * label-inline & label-stacked uses the "standalone" checkbox that lives outside the label
      */
 :host([data-render-mode="shadow"][variant='label-inline']) [part='checkbox'],:host([data-render-mode="shadow"][variant='label-stacked']) [part='checkbox'] {
-    width: 1rem;
-    height: 1rem;
-    margin: 0;
-    clip: auto;
-    opacity: 0;
-    z-index: 1;
-  }
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  clip: auto;
+  opacity: 0;
+  z-index: 1;
+}
 /**
    * A temporarily baked-in utility class until SLDS gets a proper utility package.
    *
@@ -374,8 +380,8 @@
   text-transform: none !important;
   white-space: nowrap !important;
 }
-:host([data-render-mode="shadow"]) .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after {
-  content: "";
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after {
+  content: '';
   display: block;
   position: absolute;
   top: 50%;

package/src/lightning/primitiveCellCheckbox/input-radio-group.slds.css

@@ -1,5 +1,4 @@
 
-
 :host([data-render-mode="shadow"]) .slds-radio {
   display: inline-block;
 }
@@ -20,7 +19,9 @@
   background-color: var(--slds-c-radio-color-background, var(--slds-g-color-surface-container-1));
   box-shadow: var(--slds-c-radio-shadow);
   /* stylelint-enable */
-  transition: border 0.1s linear, background-color 0.1s linear;
+  transition:
+    border 0.1s linear,
+    background-color 0.1s linear;
 }
 
 :host([data-render-mode="shadow"]) .slds-radio .slds-form-element__label {
@@ -139,9 +140,9 @@
 /* ------------------------------------------- */
 
 @media (width >=48em) {
-   :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
-     float: none;
-   }
+  :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+    float: none;
+  }
 }
 
 /**

package/src/lightning/primitiveCellCheckbox/primitiveCellCheckbox.js

@@ -9,7 +9,12 @@ import { api } from 'lwc';
 import { keyCodes } from 'lightning/utilsPrivate';
 import checkbox from './checkbox.html';
 import radio from './radio.html';
-import { getRealDOMId, synchronizeAttrs, normalizeBoolean, reflectAttribute } from 'lightning/utilsPrivate';
+import {
+    getRealDOMId,
+    synchronizeAttrs,
+    normalizeBoolean,
+    reflectAttribute,
+} from 'lightning/utilsPrivate';
 
 const i18n = {
     selectItem: labelSelectItem,
@@ -38,18 +43,18 @@ export default class PrimitiveCellCheckbox extends PrimitiveDatatableCell {
 
     @api
     get isDisabled() {
-      return this._isDisabled;
+        return this._isDisabled;
     }
 
     set isDisabled(value) {
-      this._isDisabled = normalizeBoolean(value);
+        this._isDisabled = normalizeBoolean(value);
 
-      if (!this.template.synthetic) {
-        reflectAttribute(this, 'disabled', this._isDisabled);
-      }
+        if (!this.template.synthetic) {
+            reflectAttribute(this, 'disabled', this._isDisabled);
+        }
     }
 
-    @api get isSelected() { 
+    @api get isSelected() {
         return this._isSelected;
     }
     set isSelected(value) {
@@ -143,7 +148,7 @@ export default class PrimitiveCellCheckbox extends PrimitiveDatatableCell {
             } else {
                 this.removeAttribute('checked');
             }
-        } 
+        }
     }
 
     handleCheckboxContainerClick(event) {

package/src/lightning/primitiveCellCheckbox/radio.lbc.native.css

@@ -1,3 +1,3 @@
 @import 'lightning/sldsCommon';
 @import 'lightning/sldsUtilsVisibility';
-@import './input-radio-group.slds.css';
+@import './input-radio-group.slds.css';

package/src/lightning/primitiveCellFactory/button-icon.slds.css

@@ -190,14 +190,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-icon-sizing: 0.875rem;
   --slds-c-icon-color-foreground: currentcolor;
 
-
   --sds-c-button-font-lineheight: var(
     --slds-c-button-neutral-font-lineheight,
     var(--slds-s-button-font-lineheight, 1.875rem)
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)) ;
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -217,7 +216,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     * In all other variants, it is ok to use the previous state as a fallback value.
     */
 
-
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
     --slds-c-button-radius-border-startstart,
@@ -260,7 +258,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-color-background-hover,
     var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
+  --sds-c-button-color-background-focus: var(
+    --slds-c-button-neutral-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
     var(--slds-g-color-surface-container-2)
@@ -283,8 +284,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
-  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(
+    --slds-c-button-neutral-text-color-hover,
+    var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
+  );
+  --sds-c-button-text-color-focus: var(
+    --slds-c-button-neutral-text-color-focus,
+    var(--slds-g-color-accent-3)
+  );
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
     var(--slds-g-color-accent-3)
@@ -296,17 +303,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 /* Overriding primitiveBaseButton */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
-   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 
-   /** 
+  /** 
     * Needed to override 
     * `pointer-event: none` coming from sds
     * that prevent tooltip from showing
    */
-   pointer-events: auto;
-   cursor: default;
+  pointer-events: auto;
+  cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -417,9 +424,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
   --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
@@ -439,7 +455,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * text variant is for button-stateful
 */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -486,7 +502,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='end'] {
   display: inline-flex;
   padding-inline-start: 0;
-
 }
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
@@ -641,7 +656,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
+  --slds-c-buttonicon-color-foreground-hover: color-mix(
+    in oklab,
+    var(--slds-g-color-on-surface-inverse-1),
+    transparent 25%
+  );
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 
@@ -736,17 +755,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   * 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;
-  }
+  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"][size='large']) [part~='button-icon'],:host([data-render-mode="shadow"][size='medium']) [part~='button-icon'] {
-    height: var(--slds-c-buttonicon-sizing-height, var(--slds-g-sizing-9));
-  }
+  height: var(--slds-c-buttonicon-sizing-height, var(--slds-g-sizing-9));
+}

package/src/lightning/primitiveCellFactory/primitive-cell-factory.slds.css

@@ -56,4 +56,3 @@
 :host([data-render-mode="shadow"]:hover) [part='button button-icon'] {
   opacity: 1;
 }
-

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -300,17 +300,13 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
         const { columnType, _wrapText } = this;
         const isActionType =
             'action' === columnType || 'action' === this.columnSubType;
-        // using fallback placeholder class for case where class is an empty string
-        // known LWC issue: https://github.com/salesforce/lwc/issues/4661
-        return (
-            classSetToString({
-                'slds-truncate':
-                    columnType !== 'button-icon' && !isActionType && !_wrapText,
-                'slds-hyphenate': _wrapText,
-                'slds-line-clamp': _wrapText && this.wrapTextMaxLines,
-                'ltr-content-in-rtl': isRTL() && this.isLtrType(),
-            }) || 'private-ssr-placeholder-class'
-        );
+        return classSetToString({
+            'slds-truncate':
+                columnType !== 'button-icon' && !isActionType && !_wrapText,
+            'slds-hyphenate': _wrapText,
+            'slds-line-clamp': _wrapText && this.wrapTextMaxLines,
+            'ltr-content-in-rtl': isRTL() && this.isLtrType(),
+        });
     }
 
     get computedWrapperClass() {