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

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

@@ -1,75 +1,74 @@
 
+/* :host::part(color-picker-button), */
+:host([data-render-mode="shadow"]) [part='color-picker-button'] {
+  --slds-c-icon-color-foreground: var(--slds-g-color-on-surface-1);
+  --slds-c-icon-sizing: 0.875rem;
 
-  /* :host::part(color-picker-button), */
-  :host([data-render-mode="shadow"]) [part='color-picker-button'] {
-    --slds-c-icon-color-foreground: var(--slds-g-color-on-surface-1);
-    --slds-c-icon-sizing: 0.875rem;
+  vertical-align: top;
+  padding-inline: var(--slds-g-spacing-2);
+  padding-block: 0.3rem;
+  background: var(--slds-g-color-surface-container-1);
+  line-height: 1;
+  margin-inline-end: var(--slds-g-spacing-1);
+  border-color: 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-g-sizing-border-1);
+  border-radius: var(--slds-g-radius-border-2);
+  cursor: pointer;
+}
+:host([data-render-mode="shadow"]) [part='color-picker-button']:hover,:host([data-render-mode="shadow"]) 
+[part='color-picker-button']:focus {
+  --slds-c-icon-color-foreground: var(--slds-s-button-color-hover, var(--slds-g-color-accent-3));
+}
+:host([data-render-mode="shadow"]) [part='color-picker-button']:focus {
+  box-shadow: 0 0 3px var(--slds-s-button-shadow-focus);
+  outline: 0;
+}
+:host([data-render-mode="shadow"]) [part='color-picker-button']:active {
+  border-color: var(--slds-g-color-accent-3);
+  --slds-c-icon-color-foreground: var(--slds-g-color-accent-4);
 
-    vertical-align: top;
-    padding-inline: var(--slds-g-spacing-2);
-    padding-block: 0.3rem;
-    background: var(--slds-g-color-surface-container-1);
-    line-height: 1;
-    margin-inline-end: var(--slds-g-spacing-1);
-    border-color: 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-g-sizing-border-1);
-    border-radius: var(--slds-g-radius-border-2);
-    cursor: pointer;
-  }
-  :host([data-render-mode="shadow"]) [part='color-picker-button']:hover,:host([data-render-mode="shadow"]) 
-  [part='color-picker-button']:focus {
-    --slds-c-icon-color-foreground: var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
-  }
-  :host([data-render-mode="shadow"]) [part='color-picker-button']:focus {
-    box-shadow: 0 0 3px var(--slds-s-button-shadow-focus);
-    outline: 0;
-  }
-  :host([data-render-mode="shadow"]) [part='color-picker-button']:active {
-    border-color: var(--slds-g-color-accent-3);
-    --slds-c-icon-color-foreground: var(--slds-g-color-accent-4);
+  outline: 0;
+}
+:host([data-render-mode="shadow"]) [part='color-picker-button'] .slds-swatch {
+  display: inline-block;
+  vertical-align: middle;
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: var(--slds-g-radius-border-1);
+  box-shadow: inset 0 0 1px rgb(0 0 0 / 40%);
+}
+:host([data-render-mode="shadow"]) [part='color-picker-button'] .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+:host([data-render-mode="shadow"][disabled]) [part='color-picker-button'] {
+  --slds-c-icon-color-foreground: var(--slds-g-color-disabled-1);
 
-    outline: 0;
-  }
-  :host([data-render-mode="shadow"]) [part='color-picker-button'] .slds-swatch {
-    display: inline-block;
-    vertical-align: middle;
-    height: 1.25rem;
-    width: 1.25rem;
-    border-radius: var(--slds-g-radius-border-1);
-    box-shadow: inset 0 0 1px rgb(0 0 0 / 40%);
-  }
-  :host([data-render-mode="shadow"]) [part='color-picker-button'] .slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
-  }
-  :host([data-render-mode="shadow"][disabled]) [part='color-picker-button'] {
-    --slds-c-icon-color-foreground: var(--slds-g-color-disabled-1);
-
-    pointer-events: none;
-    border-color: transparent;
-  }
-  /* TO DO: .panel and .panel-open should be renamed
+  pointer-events: none;
+  border-color: transparent;
+}
+/* TO DO: .panel and .panel-open should be renamed
   when working on color-input ticket */
-  :host([data-render-mode="shadow"]) [part='color-picker-button'] + .panel {
-    display: none;
-  }
-  :host([data-render-mode="shadow"]) [part='color-picker-button'] + .panel-open {
-    display: block;
-    width: 250px;
-    height: 270px;
-    background-color: grey;
-  }
+:host([data-render-mode="shadow"]) [part='color-picker-button'] + .panel {
+  display: none;
+}
+:host([data-render-mode="shadow"]) [part='color-picker-button'] + .panel-open {
+  display: block;
+  width: 250px;
+  height: 270px;
+  background-color: grey;
+}

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

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }

package/src/lightning/primitiveColumnSorter/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/primitiveColumnSorter/primitive-column-sorter.slds.css

@@ -16,4 +16,3 @@
   border-radius: var(--slds-g-radius-border-2);
   border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
 }
-

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.css

@@ -1,11 +1,12 @@
 @import './primitiveColumnSorter.lbc.native.css';
 
-[part="header"] {
-    padding: var(--slds-g-sizing-3) var(--slds-g-sizing-3) var(--slds-g-sizing-3) 0;
+[part='header'] {
+    padding: var(--slds-g-sizing-3) var(--slds-g-sizing-3)
+        var(--slds-g-sizing-3) 0;
     font-weight: bold;
 }
 
-[part="sorting-config"] {
+[part='sorting-config'] {
     display: flex;
     flex: 1;
     align-items: center;
@@ -13,18 +14,23 @@
 }
 
 .slds-box {
-    display: flex; align-items: center; justify-content: space-between;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .slds-has-error {
-    margin-top: calc(var(--slds-g-spacing-1, 0.25rem) + var(--slds-g-spacing-4, 1rem));
+    margin-top: calc(
+        var(--slds-g-spacing-1, 0.25rem) + var(--slds-g-spacing-4, 1rem)
+    );
 }
 
-[part="sorting-config"]:has(lightning-combobox[invalid]) {
+[part='sorting-config']:has(lightning-combobox[invalid]) {
     margin-top: calc(var(--slds-g-spacing-4, 1rem) * -1);
 }
 
-[part="sorting-config"]:has(lightning-combobox[invalid]) + lightning-button-icon {
+[part='sorting-config']:has(lightning-combobox[invalid])
+    + lightning-button-icon {
     margin-top: calc(var(--slds-g-spacing-4, 1rem) * -1);
 }
 

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.html

@@ -53,6 +53,6 @@
                 </span>
             </fieldset>
         </div>
-        <lightning-button-icon icon-name="utility:delete" variant="bare" disabled={rule.disabledTrash} onclick={handleDelete} alternative-text="Settings"></lightning-button-icon>
+        <lightning-button-icon icon-name="utility:delete" variant="bare" disabled={rule.disabledTrash} onclick={handleDelete} alternative-text={i18n.deleteButtonAltText}></lightning-button-icon>
     </div>
 </template>

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.js

@@ -11,6 +11,7 @@ import dropdownPlaceholder from '@salesforce/label/LightningPrimitiveColumnSorte
 import ascending from '@salesforce/label/LightningPrimitiveColumnSorter.ascending';
 import descending from '@salesforce/label/LightningPrimitiveColumnSorter.descending';
 import missingValueValidation from '@salesforce/label/LightningPrimitiveColumnSorter.missingValueValidation';
+import deleteButtonAltText from '@salesforce/label/LightningPrimitiveColumnSorter.deleteButtonAltText';
 
 const i18n = {
     moveUpTooltip,
@@ -19,6 +20,7 @@ const i18n = {
     ascending,
     descending,
     missingValueValidation,
+    deleteButtonAltText,
 };
 
 export default class PrimitiveColumnSorter extends LightningShadowBaseClass {

package/src/lightning/primitiveCoordinateItem/__examples__/basic/basic.js

@@ -5,5 +5,4 @@
  */
 import { LightningElement } from 'lwc';
 
-export default class Playground extends LightningElement {
-}
+export default class Playground extends LightningElement {}

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

@@ -187,14 +187,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);
 
@@ -214,7 +213,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,
@@ -257,7 +255,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)
@@ -280,8 +281,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)
@@ -293,17 +300,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:
@@ -414,9 +421,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);
@@ -436,7 +452,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;
@@ -483,7 +499,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.

package/src/lightning/primitiveCoordinateItem/coordinate-item.slds.css

@@ -32,7 +32,8 @@
 
 :host([data-render-mode="shadow"]) .slds-coordinates__item-action:focus-visible,:host([data-render-mode="shadow"]) 
 .slds-coordinates__item-action:focus {
-  box-shadow: 0 0 0 2px var(--slds-g-color-brand-base-15) inset,
+  box-shadow:
+    0 0 0 2px var(--slds-g-color-brand-base-15) inset,
     0 0 0 4px var(--slds-g-color-surface-1) inset;
 }
 

package/src/lightning/primitiveCoordinateItem/primitiveCoordinateItem.css

@@ -1 +1 @@
-@import './primitiveCoordinateItem.lbc.native.css'
+@import './primitiveCoordinateItem.lbc.native.css';

package/src/lightning/primitiveCustomCell/primitiveCustomCell.js

@@ -59,9 +59,7 @@ export default class PrimitiveCustomCell extends LightningShadowBaseClass {
         if (features.ENABLE_TREE_GRID_CUSTOM_TYPES) {
             typeAttributes = this.type.typeAttributes;
         } else {
-            typeAttributes = this.types.getType(
-                this.columnType
-            ).typeAttributes;
+            typeAttributes = this.types.getType(this.columnType).typeAttributes;
         }
         const attrs = {};
         if (Array.isArray(typeAttributes)) {
@@ -80,7 +78,9 @@ export default class PrimitiveCustomCell extends LightningShadowBaseClass {
             // Check if the current element has a shadow root and the specified attribute
             navigable = element.matches('[data-navigation="enable"]');
             if (element.shadowRoot && navigable) {
-                let shadowElements = element.shadowRoot.querySelectorAll('[data-navigation="enable"]');
+                let shadowElements = element.shadowRoot.querySelectorAll(
+                    '[data-navigation="enable"]'
+                );
 
                 // If shadow elements with the attribute are found, recursively traverse them
                 if (shadowElements.length > 0) {
@@ -89,16 +89,17 @@ export default class PrimitiveCustomCell extends LightningShadowBaseClass {
                     // If no shadow elements with the attribute, add the current element to the result
                     result.push(element);
                 }
-            } else if(navigable) {
+            } else if (navigable) {
                 result.push(element);
             }
         };
 
         // Start traversal from the root elements with the specified attribute
-        let rootElements = this.template.querySelectorAll('[data-navigation="enable"]');
+        let rootElements = this.template.querySelectorAll(
+            '[data-navigation="enable"]'
+        );
         rootElements.forEach(traverseShadowRoots);
 
         return result;
     }
-
 }

package/src/lightning/primitiveDatatableCell/primitiveDatatableCell.js

@@ -105,10 +105,12 @@ export default class PrimitiveDatatableCell extends LightningShadowBaseClass {
         switch (direction) {
             case -1: {
                 const inputs = this.getActionableElements();
-                if(incomingMode === 'NAVIGATION'){
+                if (incomingMode === 'NAVIGATION') {
                     this._currentInputIndex = 0;
                 } else {
-                    this._currentInputIndex = inputs.length ? inputs.length - 1 : 0;
+                    this._currentInputIndex = inputs.length
+                        ? inputs.length - 1
+                        : 0;
                 }
                 break;
             }