lightning-base-components 1.15.2-alpha → 1.16.1-alpha

package/src/lightning/spinner/spinner.slds.css

@@ -0,0 +1,432 @@
+
+/* 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"]) [part='spinner'] .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;
+}
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part='backdrop'] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9050;
+    background-color: var(--slds-c-spinner-backdrop-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    visibility: visible;
+    opacity: 0.75;
+    transition: opacity 0.2s ease, visibility 0s;
+    transition-delay: 0s, 0.3s;
+  }
+
+  /* brand */
+
+  :host([data-render-mode="shadow"][variant='brand']) [part~='spinner'] {
+    --slds-c-spinner-color-background: var(--sds-g-color-brand-base-60, #1b96ff);
+  }
+
+  /* inverse */
+
+  :host([data-render-mode="shadow"][variant='inverse']) [part~='spinner'] {
+    --slds-c-spinner-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  /* large */
+
+  :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 {
+    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 {
+    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 {
+    top: -0.3125rem;
+    right: -0.3125rem;
+    animation-name: dotsBounceAfter-medium;
+  }
+
+  /* end size large */
+
+  /* medium */
+
+  :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 {
+    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 {
+    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 {
+    top: -0.25rem;
+    right: -0.25rem;
+    animation-name: dotsBounceAfter-medium;
+  }
+
+  /* end size medium */
+
+  /* small */
+
+  :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 {
+    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 {
+    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 {
+    width: 0.25rem;
+    height: 0.25rem;
+    top: -0.125rem;
+    right: -0.125rem;
+    animation-name: dotsBounceAfter-small;
+  }
+
+  @keyframes dotsBounceBefore-small {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(-0.375rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dotsBounceAfter-small {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(0.375rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  /* end size small */
+
+  /* x-small */
+
+  :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 {
+    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 {
+    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 {
+    top: -0.125rem;
+    right: -0.125rem;
+    animation-name: dotsBounceAfter-extraSmall;
+  }
+
+  @keyframes dotsBounceBefore-extraSmall {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(-0.25rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dotsBounceAfter-extraSmall {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(0.25rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  /* end size x-small */
+
+  /* xx-small */
+
+  :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 {
+    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 {
+    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 {
+    top: -0.0625rem;
+    right: -0.0625rem;
+    animation-name: dotsBounceAfter-extraExtraSmall;
+  }
+
+  @keyframes dotsBounceBefore-extraExtraSmall {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
+    }
+
+    80% {
+      transform: translate3d(-0.125rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dotsBounceAfter-extraExtraSmall {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
+      transform: translate3d(0, 0, 0);
+    }
+
+    80% {
+      animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
+      transform: translate3d(0.125rem, 0, 0);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  /* end size xx-small */
+
+  :host([data-render-mode="shadow"]) [part~='spinner'] {
+    position: absolute;
+    top: 50%;
+    width: 2rem;
+
+    /*! @noflip */
+    left: 50%;
+    z-index: 9050;
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+
+  :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"]) 
+  [part~='dot-b'] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  /* 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"]) 
+  [part~='dot-a']::after,:host([data-render-mode="shadow"]) 
+  [part~='dot-b']::after {
+    content: '';
+    position: absolute;
+    background-color: var(--slds-c-spinner-color-background, var(--sds-g-color-neutral-base-65, #a0a0a0));
+    border-radius: 50%;
+    animation-duration: 1000ms;
+    animation-iteration-count: infinite;
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-a'] {
+    transform: rotate(60deg);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-b'] {
+    transform: rotate(120deg);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='spinner']::before {
+    animation-delay: -83.33333ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-a']::before {
+    animation-delay: 83.33333ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-b']::before {
+    animation-delay: 250ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='spinner']::after {
+    animation-delay: 416.66667ms;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='dot-a']::after {
+    animation-delay: 583.33333ms;
+  }
+
+  :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"]) 
+  [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"]) 
+  [part~='dot-b']::after,:host([data-render-mode="shadow"]) 
+  [part~='dot-b']::before {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  :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;
+    top: -0.25rem;
+    left: -0.25rem;
+  }
+
+  :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;
+    top: -0.25rem;
+    right: -0.25rem;
+  }
+
+  @keyframes dotsBounceBefore-medium {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(-0.5rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes dotsBounceAfter-medium {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+      transform: translate3d(0, 0, 0);
+      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+      transform: translate3d(0.5rem, 0, 0);
+      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+}

package/src/lightning/tab/__docs__/tab.md

@@ -29,7 +29,7 @@ For example, you want to display a tab conditionally.
 ```html
 <lightning-tabset>
     <lightning-tab label="Item One"> Content for tab 1 </lightning-tab>
-    <template if:true="{showTabTwo}">
+    <template if:true={showTabTwo}>
         <lightning-tab label="Item Two"> Content for tab 2 </lightning-tab>
     </template>
 </lightning-tabset>

package/src/lightning/tabBar/tabBar.html

@@ -6,7 +6,7 @@
         <template for:each={_allTabs} for:item="tab">
             <template if:true={tab.visible}>
                 <li data-tab key={tab.value} class={tab.class} onclick={handleTabClick}
-                    title={tab.title} role="presentation" data-label={tab.label} data-tab-value={tab.value}>
+                    title={tab.title} role="presentation" data-label={tab.label} data-tab-value={tab.value} data-target-selection-name={tab.targetSelectionName}>
                     <a class={tab.linkClass}
                         data-tab-value={tab.value}
                         data-label={tab.label}
@@ -43,6 +43,7 @@
             <li data-overflow class={computedOverflowClass} style={computedOverflowVisibility}>
                 <lightning-button-menu variant="bare"
                     alternative-text={i18n.moreAlternativeText}
+                    data-target-reveals={targetReveals}
                     title={i18n.moreTitle}
                     onselect={handleOverflowSelect}
                     icon-name="utility:chevrondown"
@@ -50,7 +51,7 @@
                     menu-alignment="right">
                     <template for:each={_allTabs} for:item="tab">
                         <template if:false={tab.visible}>
-                            <lightning-menu-item key={tab.value} label={tab.label} value={tab.value}></lightning-menu-item>
+                            <lightning-menu-item key={tab.value} label={tab.label} value={tab.value} data-target-selection-name={tab.targetSelectionName}></lightning-menu-item>
                         </template>
                     </template>
                 </lightning-button-menu>

package/src/lightning/tabBar/tabBar.js

@@ -17,6 +17,7 @@ const i18n = {
 };
 
 const RECOMPUTE_OVERFLOW_THRESHOLD_PX = 30;
+const TARGET_SELECTION_NAME_SUFFIX = 'Tab';
 
 export default class LightningTabBar extends LightningElement {
     @api disableOverflow = false;
@@ -99,6 +100,10 @@ export default class LightningTabBar extends LightningElement {
                 endIconName: tab.endIconName,
                 endIconAlternativeText: tab.endIconAlternativeText,
                 showErrorIndicator: tab.showErrorIndicator,
+                targetSelectionName: tab.value
+                    ? encodeURIComponent(tab.value) +
+                      TARGET_SELECTION_NAME_SUFFIX
+                    : '',
             };
         });
 
@@ -439,4 +444,14 @@ export default class LightningTabBar extends LightningElement {
 
         this._queueSynchronizeA11 = true;
     }
+
+    get targetReveals() {
+        const hiddenTargets = [];
+        this._allTabs.forEach((tab) => {
+            if (!tab.visible && tab.targetSelectionName) {
+                hiddenTargets.push(tab.targetSelectionName);
+            }
+        });
+        return hiddenTargets.join(',');
+    }
 }

package/src/lightning/tabset/__docs__/tabset.md

@@ -50,10 +50,10 @@ Here's an example with two tabs, which loads content when the tabs are selected.
 ```html
 <template>
     <lightning-tabset>
-        <lightning-tab label="Item One" value="1" onactive="{handleActive}">
+        <lightning-tab label="Item One" value="1" onactive={handleActive}>
             Here's the content for Item One: {tabContent}
         </lightning-tab>
-        <lightning-tab label="Item Two" value="2" onactive="{handleActive}">
+        <lightning-tab label="Item Two" value="2" onactive={handleActive}>
             Here's the content for Item Two: {tabContent}
         </lightning-tab>
     </lightning-tabset>

package/src/lightning/textarea/__docs__/textarea.md

@@ -41,7 +41,7 @@ To retrieve the content of the text area field, use `event.detail.value` propert
         name="myTextArea"
         value="initial value"
         label="What are you thinking about?"
-        onchange="{countLength}"
+        onchange={countLength}
     >
     </lightning-textarea>
 </template>
@@ -118,7 +118,7 @@ without replacing any content.
 <template>
     <lightning-textarea placeholder="Type something interesting">
     </lightning-textarea>
-    <lightning-button label="Insert Text" onclick="{handleClick}">
+    <lightning-button label="Insert Text" onclick={handleClick}>
     </lightning-button>
 </template>
 ```
@@ -157,7 +157,7 @@ The resulting content of the text area is `0123456789 567890`.
 ```html
 <template>
     <lightning-textarea value="012345678901234567890"> </lightning-textarea>
-    <lightning-button label="Clip Text" onclick="{handleClick}">
+    <lightning-button label="Clip Text" onclick={handleClick}>
     </lightning-button>
 </template>
 ```

package/src/lightning/textarea/textarea.html

@@ -5,7 +5,7 @@
         </template>
         {label}
     </label>
-    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
     <div class="slds-form-element__control slds-grow textarea-container">
         <textarea id="input" class="slds-textarea"
             aria-describedby={computedUniqueHelpElementId}

package/src/lightning/textarea/textarea.js

@@ -1,8 +1,9 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
 import labelRequired from '@salesforce/label/LightningControl.required';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import {
     normalizeBoolean,
     synchronizeAttrs,
@@ -23,6 +24,7 @@ import { TouchScroller } from 'lightning/touchScrollLibrary';
 
 const i18n = {
     required: labelRequired,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 /**
@@ -483,6 +485,10 @@ export default class LightningTextarea extends LightningElement {
     get computedAriaInvalid() {
         return computeAriaInvalid(this._helpMessage, this.value);
     }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }
 
 LightningTextarea.interopMap = {

package/src/lightning/tile/__docs__/tile.md

@@ -108,8 +108,8 @@ You can add a dropdown menu with actions to a tile. To find out which sections a
     <lightning-tile
         label="My Open Cases"
         href="/path/to/my-open-cases"
-        actions="{actions}"
-        onactiontriggered="{handleAction}"
+        actions={actions}
+        onactiontriggered={handleAction}
     >
         <p class="slds-truncate" title="10 Cases">10 Cases</p>
     </lightning-tile>

package/src/lightning/timepicker/timepicker.html

@@ -6,7 +6,7 @@
             </template>
             {label}
         </label>
-        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
     </template>
     <div class="slds-form-element__control">
         <lightning-base-combobox