lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/buttonMenu/button-menu.slds.css

@@ -2,12 +2,12 @@
 /* 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: '') {
   /**
    * Spacing amount between elements in button_icon versus standard button
    * are different so we target button_icon specifically. display: flex
    * comes from parent button styles.
    */
+
   :host([data-render-mode="shadow"]) [part='button-icon'] {
     gap: var(--slds-g-spacing-1);
   }
@@ -21,6 +21,7 @@
    * Refactoring to component version is important, until then this code is
    * fragile because it is forked, changes to button-icon won't be reflected here.
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-more {
     --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
@@ -32,6 +33,7 @@
    * SLDS sizing of the "more" icon is inconsistent and potentially broken.
    * Until fixed, we'll stick with a consistent size across all size variants.
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-more lightning-primitive-icon:last-of-type {
     --slds-c-icon-sizing: var(--slds-g-sizing-3);
   }
@@ -39,6 +41,7 @@
   /**
    * Sizing hacks
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-xx-small {
     /* No hook for the value we need, so we calc to get it and keep things relative */
     --slds-c-buttonicon-spacing-block: calc(var(--slds-g-spacing-1) / 1.5);
@@ -67,6 +70,7 @@
   /**
    * Variant Hacks - Container
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-container {
     --slds-c-buttonicon-color-border: transparent;
     --slds-c-buttonicon-color-border-hover: transparent;
@@ -79,6 +83,7 @@
   /**
    * Variant Hacks - Border Filled
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-border-filled {
     --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
@@ -89,6 +94,7 @@
   /**
    * Variant Hacks - Border Inverse
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-border-inverse {
     /* Border */
     --slds-c-buttonicon-color-border: var(--slds-g-color-brand-base-100);
@@ -135,6 +141,7 @@
   /**
    * Variant Hacks - Bare
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-bare {
     --slds-c-buttonicon-color-border: transparent;
     --slds-c-buttonicon-color-border-hover: transparent;
@@ -146,4 +153,3 @@
     /* Disabled */
     --slds-c-buttonicon-color-border-disabled: transparent;
   }
-}

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

@@ -217,7 +217,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

package/src/lightning/buttonMenu/buttonMenu.css

@@ -1 +1,6 @@
 @import './buttonMenu.lbc.native.css';
+
+.fix-slds-button_icon-border-filled {
+    height: unset;
+    line-height: var(--slds-c-button-line-height, var(--sds-c-button-line-height, 1.875rem));
+}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -473,6 +473,8 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
                     this.variant === 'border' && isDropdownIcon,
                 'slds-button_icon-border-filled':
                     this.variant === 'border-filled',
+                'fix-slds-button_icon-border-filled':
+                    this.variant === 'border-filled' && this.groupOrder !== '',
                 'slds-button_icon-border-inverse':
                     this.variant === 'border-inverse',
                 'slds-button_icon-inverse': this.variant === 'bare-inverse',

package/src/lightning/buttonStateful/button-stateful.slds.css

@@ -2,7 +2,6 @@
 /* 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([data-render-mode="shadow"]) {
     /* button text */
     --slds-c-button-neutral-text-color: var(--slds-c-buttonstateful-text-color);
@@ -39,6 +38,7 @@
   }
 
   /* vertical alignment for icon and text */
+
   :host([data-render-mode="shadow"]) .slds-text-not-selected,:host([data-render-mode="shadow"]) 
   .slds-text-selected,:host([data-render-mode="shadow"]) 
   .slds-text-selected-focus {
@@ -46,30 +46,35 @@
   }
 
   /* not selected: */
+
   :host([data-render-mode="shadow"]) .slds-not-selected .slds-text-selected,:host([data-render-mode="shadow"]) 
   .slds-not-selected .slds-text-selected-focus {
     display: none;
   }
 
   /* selected focus */
+
   :host([data-render-mode="shadow"]) .slds-is-selected-clicked .slds-text-not-selected,:host([data-render-mode="shadow"]) 
   .slds-is-selected-clicked .slds-text-selected-focus {
     display: none;
   }
 
   /* selected but not active */
+
   :host([data-render-mode="shadow"]) .slds-is-selected .slds-text-not-selected,:host([data-render-mode="shadow"]) 
   .slds-is-selected .slds-text-selected-focus {
     display: none;
   }
 
   /* selected + hover/focus: remove selected text */
+
   :host([data-render-mode="shadow"]) .slds-is-selected:hover .slds-text-selected,:host([data-render-mode="shadow"]) 
   .slds-is-selected:focus .slds-text-selected {
     display: none;
   }
 
   /* selected + hover: show hover/focus text */
+
   :host([data-render-mode="shadow"]) .slds-is-selected:hover .slds-text-selected-focus,:host([data-render-mode="shadow"]) 
   .slds-is-selected:focus .slds-text-selected-focus {
     display: contents;
@@ -78,4 +83,3 @@
   :host([data-render-mode="shadow"]) .slds-is-selected:not(:hover) {
     border-color: transparent;
   }
-}

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

@@ -217,7 +217,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

package/src/lightning/buttonStateful/buttonStateful.js

@@ -6,6 +6,7 @@ import {
     normalizeString as normalize,
     buttonGroupOrderClass,
 } from 'lightning/utilsPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const DEFAULT_VARIANT = 'neutral';
 
@@ -120,7 +121,9 @@ export default class LightningButtonStateful extends LightningShadowBaseClass {
      */
     @api
     focus() {
-        this.template.querySelector('button').focus();
+        if (isCSR) {
+            this.template.querySelector('button').focus();
+        }
     }
 
     // update custom element's classList

package/src/lightning/calendar/calendar.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/calendar/calendar.slds.css

@@ -2,9 +2,9 @@
 /* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
     /* Adding these instead of sldsCommon
     as they are conflicting with synthetic styles */
+
     :host([data-render-mode="shadow"]) button,:host([data-render-mode="shadow"]) 
     input,:host([data-render-mode="shadow"]) 
     optgroup,:host([data-render-mode="shadow"]) 
@@ -49,6 +49,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     /* Indicates today */
+
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:hover > .slds-day,:host([data-render-mode="shadow"]) 
     [part~="calendar"] tbody > tr > td:focus > .slds-day,:host([data-render-mode="shadow"]) 
     [part~="calendar"] tbody > tr > td.slds-is-today > .slds-day {
@@ -72,6 +73,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     /* Indicates selected days */
+
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-selected > .slds-day {
         background: var(--slds-g-color-accent-container-2);
         color: var(--slds-g-color-on-accent-1);
@@ -84,17 +86,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     /* Aligns filter items horizontally */
+
     :host([data-render-mode="shadow"]) .slds-datepicker__filter {
         padding: var(--slds-g-spacing-1);
     }
 
     /* Spaces out month filter */
+
     :host([data-render-mode="shadow"]) .slds-datepicker__filter_month,:host([data-render-mode="shadow"]) 
     .slds-datepicker__filter--month {
         padding: 0 var(--slds-g-spacing-1) 0 0;
     }
 
     /* Month Table */
+
     :host([data-render-mode="shadow"]) .slds-datepicker__month {
         font-size: var(--slds-g-font-scale-neg-3);
       }
@@ -105,6 +110,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     /* Indicates days that are in previous/next months */
+
     :host([data-render-mode="shadow"]) .slds-day_adjacent-month {
         color: var(--slds-g-color-border-base-4);
     }
@@ -198,11 +204,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         text-decoration: underline;
         color: var(--slds-g-color-accent-4);
     }
+
     :host([data-render-mode="shadow"]) .slds-text-link:active {
         color: var(--slds-g-color-accent-3);
     }
 
     /* Utilities Grid */
+
     :host([data-render-mode="shadow"]) .slds-grid {
         display: flex;
     }
@@ -227,4 +235,3 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     :host([data-render-mode="shadow"]) .slds-grow {
         flex-grow: 1;
     }
-}

package/src/lightning/colorPickerCustom/color-picker-custom.slds.css

@@ -15,23 +15,23 @@
   white-space: nowrap !important;
 }
 
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part='color-picker-custom'] {
+:host([data-render-mode="shadow"]) [part='color-picker-custom'] {
     --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-1);
     --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-1);
   }
 
-  /* needed to change the size of the hex input */
-  :host([data-render-mode="shadow"]) .slds-color-picker__input-custom-hex {
+/* needed to change the size of the hex input */
+
+:host([data-render-mode="shadow"]) .slds-color-picker__input-custom-hex {
     flex: none;
     width: 4.2rem;
   }
 
-  :host([data-render-mode="shadow"]) .slds-m-bottom_small {
+:host([data-render-mode="shadow"]) .slds-m-bottom_small {
     margin-block-end: var(--slds-g-spacing-3);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__range-indicator {
+:host([data-render-mode="shadow"]) .slds-color-picker__range-indicator {
     transform: translate3d(-0.375rem, 0.375rem, 0);
     cursor: pointer;
     position: absolute;
@@ -42,16 +42,16 @@
     box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 16%), inset 0 2px 4px 4px rgba(0, 0, 0, 16%);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__range-indicator:focus {
+:host([data-render-mode="shadow"]) .slds-color-picker__range-indicator:focus {
     outline: none;
     box-shadow: 0 0 3px var(--slds-g-color-accent-2);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-and-preview {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-and-preview {
     display: flex;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider {
     appearance: none;
     cursor: pointer;
     flex: 1;
@@ -138,7 +138,7 @@
     );
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-webkit-slider-thumb {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-webkit-slider-thumb {
     appearance: none;
     cursor: pointer;
     height: calc(var(--slds-g-spacing-5) - (1px * 2));
@@ -148,7 +148,7 @@
     background: var(--slds-g-color-surface-container-2);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-moz-range-thumb {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-moz-range-thumb {
     appearance: none;
     box-sizing: border-box; /* Note: FF did not inherit border-box from parent. Initially set to content-box, it needs to set manually here */
     cursor: pointer;
@@ -159,31 +159,31 @@
     background: var(--slds-g-color-neutral-base-95);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-webkit-slider-thumb {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-webkit-slider-thumb {
     box-shadow: 0 0 5px var(--slds-g-color-accent-2);
     border: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-moz-range-thumb {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-moz-range-thumb {
     box-shadow: 0 0 5px var(--slds-g-color-accent-2);
     border: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-webkit-slider-thumb {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-webkit-slider-thumb {
     box-shadow: 0 0 5px var(--slds-g-color-accent-2);
     border: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-moz-range-thumb {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-moz-range-thumb {
     box-shadow: 0 0 5px var(--slds-g-color-accent-2);
     border: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus {
     outline: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-swatch {
+:host([data-render-mode="shadow"]) .slds-swatch {
     margin-inline-start: var(--slds-g-spacing-1);
     height: var(--slds-g-spacing-5);
     width: var(--slds-g-spacing-5);
@@ -191,27 +191,26 @@
     border-radius: var(--slds-g-spacing-1);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs {
+:host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs {
     display: flex;
     padding-block-start: var(--slds-g-spacing-2);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs > div {
+:host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs > div {
     margin-inline-end: var(--slds-g-spacing-1);
   }
 
-  :host([data-render-mode="shadow"]) .slds-has-error {
+:host([data-render-mode="shadow"]) .slds-has-error {
     border-color: var(--slds-g-color-border-error-1);
   }
 
-  :host([data-render-mode="shadow"]) .slds-form-element__help {
+:host([data-render-mode="shadow"]) .slds-form-element__help {
     padding-block-start: var(--slds-g-spacing-2);
     padding-inline-start: var(--slds-g-spacing-1);
     color: var(--slds-g-color-error-1);
     font-size: var(--slds-g-spacing-3);
   }
 
-  :host([data-render-mode="shadow"]) abbr[title] {
+:host([data-render-mode="shadow"]) abbr[title] {
     text-decoration: none;
   }
-}

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -95,6 +95,18 @@ export default class LightningColorPickerCustom extends LightningShadowBaseClass
         this._currentColor = value;
         this._hex = fullHex;
         this._rgb = hexToRgb(fullHex);
+
+        // W-13851481 bug-fix: if canvas open, update it
+        if (this._canvas) {
+            const hue = rgbToHsl(this._rgb).hue;
+            const position = this.rgbToPosition(this._rgb);
+            const selectedColor = `#${rgbToHex(this._rgb)}`;
+
+            this.updateRainbow(hue);
+            this.setCanvasColor(hue);
+            this.setCanvasCursor(position.x, position.y);
+            this.updateSelectedColor(selectedColor);
+        }
     }
 
     @api