npm - lightning-base-components - Versions diffs - 1.21.2-alpha → 1.21.3-alpha - Mend

lightning-base-components 1.21.2-alpha → 1.21.3-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/src/lightning/baseCombobox/spinner.slds.css CHANGED Viewed

@@ -15,8 +15,7 @@
   white-space: nowrap !important;
 }
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part='backdrop'] {
+:host([data-render-mode="shadow"]) [part='backdrop'] {
     position: absolute;
     inset: 0;
     z-index: 9050;
@@ -27,86 +26,86 @@
     transition-delay: 0s, 0.3s;
   }
-  /* brand */
+/* brand */
-  :host([data-render-mode="shadow"][variant='brand']) [part='spinner'] {
+:host([data-render-mode="shadow"][variant='brand']) [part='spinner'] {
     --_slds-c-spinner-color-background: var(---slds-g-color-accent-1);
   }
-  /* inverse */
+/* inverse */
-  :host([data-render-mode="shadow"][variant='inverse']) [part='spinner'] {
+:host([data-render-mode="shadow"][variant='inverse']) [part='spinner'] {
     --_slds-c-spinner-color-background: var(--slds-g-color-neutral-base-100);
   }
-  /* large */
+/* large */
-  :host([data-render-mode="shadow"][size='large']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='large']) [part='spinner'] {
     width: 2.75rem;
   }
-  :host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='spinner']::after {
+:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='spinner']::after {
     width: 0.625rem;
     height: 0.625rem;
   }
-  :host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before {
     top: -0.3125rem;
     left: -0.3125rem;
     animation-name: dotsBounceBefore-medium;
   }
-  :host([data-render-mode="shadow"][size='large']) [part='spinner']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='large']) [part='spinner']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after {
     top: -0.3125rem;
     right: -0.3125rem;
     animation-name: dotsBounceAfter-medium;
   }
-  /* end size large */
+/* end size large */
-  /* medium */
+/* medium */
-  :host([data-render-mode="shadow"][size='medium']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='medium']) [part='spinner'] {
     width: 2rem;
   }
-  :host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after {
+:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after {
     width: 0.5rem;
     height: 0.5rem;
   }
-  :host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before {
     top: -0.25rem;
     left: -0.25rem;
     animation-name: dotsBounceBefore-medium;
   }
-  :host([data-render-mode="shadow"][size='medium']) [part='spinner']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after {
     top: -0.25rem;
     right: -0.25rem;
     animation-name: dotsBounceAfter-medium;
   }
-  /* end size medium */
+/* end size medium */
-  /* small */
+/* small */
-  :host([data-render-mode="shadow"][size='small']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='small']) [part='spinner'] {
     width: 1.25rem;
   }
-  :host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='spinner']::after {
+:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='spinner']::after {
     width: 0.25rem;
     height: 0.25rem;
   }
-  :host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before {
     top: -0.125rem;
     left: -0.125rem;
     animation-name: dotsBounceBefore-small;
   }
-  :host([data-render-mode="shadow"][size='small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after {
     width: 0.25rem;
     height: 0.25rem;
     top: -0.125rem;
@@ -114,7 +113,7 @@
     animation-name: dotsBounceAfter-small;
   }
-  @keyframes dotsBounceBefore-small {
+@keyframes dotsBounceBefore-small {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -134,7 +133,7 @@
     }
   }
-  @keyframes dotsBounceAfter-small {
+@keyframes dotsBounceAfter-small {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -154,32 +153,32 @@
     }
   }
-  /* end size small */
+/* end size small */
-  /* x-small */
+/* x-small */
-  :host([data-render-mode="shadow"][size='x-small']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='x-small']) [part='spinner'] {
     width: 1rem;
   }
-  :host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after {
+:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after {
     width: 0.25rem;
     height: 0.25rem;
   }
-  :host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before {
     top: -0.125rem;
     left: -0.125rem;
     animation-name: dotsBounceBefore-extraSmall;
   }
-  :host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after {
     top: -0.125rem;
     right: -0.125rem;
     animation-name: dotsBounceAfter-extraSmall;
   }
-  @keyframes dotsBounceBefore-extraSmall {
+@keyframes dotsBounceBefore-extraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -199,7 +198,7 @@
     }
   }
-  @keyframes dotsBounceAfter-extraSmall {
+@keyframes dotsBounceAfter-extraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -219,32 +218,32 @@
     }
   }
-  /* end size x-small */
+/* end size x-small */
-  /* xx-small */
+/* xx-small */
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner'] {
     width: 0.5rem;
   }
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
     width: 0.125rem;
     height: 0.125rem;
   }
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before {
     top: -0.0625rem;
     left: -0.0625rem;
     animation-name: dotsBounceBefore-extraExtraSmall;
   }
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
     top: -0.0625rem;
     right: -0.0625rem;
     animation-name: dotsBounceAfter-extraExtraSmall;
   }
-  @keyframes dotsBounceBefore-extraExtraSmall {
+@keyframes dotsBounceBefore-extraExtraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -264,7 +263,7 @@
     }
   }
-  @keyframes dotsBounceAfter-extraExtraSmall {
+@keyframes dotsBounceAfter-extraExtraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -284,9 +283,9 @@
     }
   }
-  /* end size xx-small */
+/* end size xx-small */
-  :host([data-render-mode="shadow"]) [part='spinner'] {
+:host([data-render-mode="shadow"]) [part='spinner'] {
     position: absolute;
     top: 50%;
     width: 2rem;
@@ -297,15 +296,16 @@
     transform: translate(-50%, -50%) rotate(90deg);
   }
-  :host([data-render-mode="shadow"]) [part='spinner'],:host([data-render-mode="shadow"])
+:host([data-render-mode="shadow"]) [part='spinner'],:host([data-render-mode="shadow"])
   [part='dot-a'],:host([data-render-mode="shadow"])
   [part='dot-b'] {
     transform-origin: 50% 50%;
     will-change: transform;
   }
-  /* creates the circles */
-  :host([data-render-mode="shadow"]) [part='dot-a'],:host([data-render-mode="shadow"])
+/* creates the circles */
+:host([data-render-mode="shadow"]) [part='dot-a'],:host([data-render-mode="shadow"])
   [part='dot-b'] {
     position: absolute;
     top: 0;
@@ -313,8 +313,9 @@
     width: 100%;
   }
-  /* stylelint-disable no-duplicate-selectors */
-  :host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"])
+/* stylelint-disable no-duplicate-selectors */
+:host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"])
   [part='spinner']::after,:host([data-render-mode="shadow"])
   [part='dot-a']::before,:host([data-render-mode="shadow"])
   [part='dot-b']::before,:host([data-render-mode="shadow"])
@@ -329,39 +330,39 @@
     transform: translate3d(0, 0, 0);
   }
-  :host([data-render-mode="shadow"]) [part='dot-a'] {
+:host([data-render-mode="shadow"]) [part='dot-a'] {
     transform: rotate(60deg);
   }
-  :host([data-render-mode="shadow"]) [part='dot-b'] {
+:host([data-render-mode="shadow"]) [part='dot-b'] {
     transform: rotate(120deg);
   }
-  :host([data-render-mode="shadow"]) [part='spinner']::before {
+:host([data-render-mode="shadow"]) [part='spinner']::before {
     animation-delay: -83.3333ms;
   }
-  :host([data-render-mode="shadow"]) [part='dot-a']::before {
+:host([data-render-mode="shadow"]) [part='dot-a']::before {
     animation-delay: 83.3333ms;
   }
-  :host([data-render-mode="shadow"]) [part='dot-b']::before {
+:host([data-render-mode="shadow"]) [part='dot-b']::before {
     animation-delay: 250ms;
   }
-  :host([data-render-mode="shadow"]) [part='spinner']::after {
+:host([data-render-mode="shadow"]) [part='spinner']::after {
     animation-delay: 416.6667ms;
   }
-  :host([data-render-mode="shadow"]) [part='dot-a']::after {
+:host([data-render-mode="shadow"]) [part='dot-a']::after {
     animation-delay: 583.3333ms;
   }
-  :host([data-render-mode="shadow"]) [part='dot-b']::after {
+:host([data-render-mode="shadow"]) [part='dot-b']::after {
     animation-delay: 750ms;
   }
-  :host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"])
+:host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"])
   [part='spinner']::before,:host([data-render-mode="shadow"])
   [part='dot-a']::after,:host([data-render-mode="shadow"])
   [part='dot-a']::before,:host([data-render-mode="shadow"])
@@ -371,7 +372,7 @@
     height: 0.5rem;
   }
-  :host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"])
+:host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"])
   [part='dot-a']::before,:host([data-render-mode="shadow"])
   [part='dot-b']::before {
     animation-name: dotsBounceBefore-medium;
@@ -379,7 +380,7 @@
     left: -0.25rem;
   }
-  :host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"])
+:host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"])
   [part='dot-a']::after,:host([data-render-mode="shadow"])
   [part='dot-b']::after {
     animation-name: dotsBounceAfter-medium;
@@ -387,7 +388,7 @@
     right: -0.25rem;
   }
-  @keyframes dotsBounceBefore-medium {
+@keyframes dotsBounceBefore-medium {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -407,7 +408,7 @@
     }
   }
-  @keyframes dotsBounceAfter-medium {
+@keyframes dotsBounceAfter-medium {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -426,4 +427,3 @@
       transform: translateX(0);
     }
   }
-}

package/src/lightning/baseComboboxFormattedText/baseComboboxFormattedText.js-meta.xml ADDED Viewed

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

package/src/lightning/baseComboboxItem/baseComboboxItem.js CHANGED Viewed

@@ -43,18 +43,22 @@ export default class LightningBaseComboboxItem extends LightningShadowBaseClass
     }
     @api
-    highlight() {
-        this.toggleHighlight(true);
+    highlight(isSelected) {
+        this.toggleHighlight(true, isSelected);
     }
     @api
-    removeHighlight() {
-        this.toggleHighlight(false);
+    removeHighlight(isSelected) {
+        this.toggleHighlight(false, isSelected);
     }
-    toggleHighlight(highlighted) {
+    toggleHighlight(highlighted, isSelected) {
         if (this.item.selectable) {
-            this.setAttribute('aria-selected', highlighted ? 'true' : 'false');
+            //Only announce the selected item from the list, not the hovered or focused ones.
+            this.setAttribute(
+                'aria-selected',
+                isSelected === 'true' ? true : false
+            );
             this.classList.toggle('slds-has-focus', highlighted);
         }
     }

package/src/lightning/baseComboboxItem/baseComboboxItem.js-meta.xml ADDED Viewed

@@ -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>