lightning-base-components 1.21.1-alpha → 1.21.3-alpha

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

@@ -1,272 +1,44 @@
-/* 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 */
 
-@supports (--styling-hooks: '') {
   /* :host::part(color-picker-button), */
+
   :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)
-    );
+    --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-c-colorpickerbutton-spacing-inline, var(--sds-g-spacing-2, 0.5rem));
-    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));
+    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(--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-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));
-    box-shadow: var(--slds-c-colorpickerbutton-shadow);
+    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-colorpickerbutton-color-background: var(--slds-c-colorpickerbutton-color-background-hover);
-    --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)
-    );
+    --slds-c-icon-color-foreground: 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)
-    );
 
+  :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 {
-    --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)
-    );
-    --slds-c-colorpickerbutton-color-foreground: var(
-      --slds-c-colorpickerbutton-color-foreground-active,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
+    border-color: var(--slds-g-color-accent-3);
+    --slds-c-icon-color-foreground: var(--slds-g-color-accent-4);
 
     outline: 0;
   }
@@ -276,7 +48,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%);
   }
 
@@ -294,17 +66,15 @@ 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)
-    );
+    --slds-c-icon-color-foreground: 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-g-color-border-disabled-2);
   }
 
   /* 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;
   }
@@ -315,4 +85,3 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     height: 270px;
     background-color: grey;
   }
-}

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,31 @@ export default class PrimitiveCustomCell extends LightningElement {
 
     @api
     getActionableElements() {
-        return queryFocusable(this.template);
+        let result = [];
+        let navigable;
+        const traverseShadowRoots = (element) => {
+            // 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"]');
+
+                // If shadow elements with the attribute are found, recursively traverse them
+                if (shadowElements.length > 0) {
+                    shadowElements.forEach(traverseShadowRoots);
+                } else {
+                    // If no shadow elements with the attribute, add the current element to the result
+                    result.push(element);
+                }
+            } else if(navigable) {
+                result.push(element);
+            }
+        };
+
+        // Start traversal from the root elements with the specified attribute
+        let rootElements = this.template.querySelectorAll('[data-navigation="enable"]');
+        rootElements.forEach(traverseShadowRoots);
+
+        return result;
     }
+
 }

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/primitiveHeaderFactory/nonsortableHeader.css

@@ -0,0 +1 @@
+@import 'lightning/sldsCommon';

package/src/lightning/primitiveHeaderFactory/selectableHeader.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsVisibility';