lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/metadata/raptor.json

@@ -2463,6 +2463,7 @@
     ]
   },
   "marketingAssetcreationApi": {},
+  "marketingCdpApi": {},
   "mediaUtils": {
     "minVersion": "0.0"
   },
@@ -3147,8 +3148,12 @@
     ]
   },
   "recordPicker": {
+    "minVersion": "59.0",
     "slotNames": [],
     "properties": [
+      {
+        "name": "displayInfo"
+      },
       {
         "name": "filter"
       },
@@ -3160,6 +3165,9 @@
       },
       {
         "name": "placeholder"
+      },
+      {
+        "name": "value"
       }
     ]
   },
@@ -3662,6 +3670,7 @@
     ]
   },
   "toast": {
+    "minVersion": "59.0",
     "slotNames": [
       "",
       "message"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.1-alpha",
+    "version": "1.18.3-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1255,6 +1255,62 @@
                 "path": "scopedImports/@salesforce-internal-core.untrustedContentDomain.js"
             }
         ],
+        "nativeShadowEnabledComponents": [
+            "lightning-accordion",
+            "lightning-accordion-section",
+            "lightning-avatar",
+            "lightning-base-combobox",
+            "lightning-base-combobox-item",
+            "lightning-breadcrumb",
+            "lightning-breadcrumbs",
+            "lightning-bubble",
+            "lightning-button",
+            "lightning-button-group",
+            "lightning-button-icon",
+            "lightning-button-icon-stateful",
+            "lightning-button-menu",
+            "lightning-button-stateful",
+            "lightning-card",
+            "lightning-calendar",
+            "lightning-color-picker-custom",
+            "lightning-color-picker-panel",
+            "lightning-combobox",
+            "lightning-datepicker",
+            "lightning-datetimepicker",
+            "lightning-dual-listbox",
+            "lightning-dynamic-icon",
+            "lightning-formatted-rich-text",
+            "lightning-formatted-text",
+            "lightning-helptext",
+            "lightning-icon",
+            "lightning-input",
+            "lightning-layout",
+            "lightning-layout-item",
+            "lightning-menu-divider",
+            "lightning-menu-item",
+            "lightning-menu-subheader",
+            "lightning-overlay-container",
+            "lightning-pill",
+            "lightning-pill-container",
+            "lightning-popup",
+            "lightning-popup-source",
+            "lightning-primitive-bubble",
+            "lightning-primitive-color-picker-button",
+            "lightning-primitive-icon",
+            "lightning-primitive-input-checkbox",
+            "lightning-primitive-input-checkbox-button",
+            "lightning-primitive-input-color",
+            "lightning-primitive-input-file",
+            "lightning-primitive-input-simple",
+            "lightning-primitive-input-toggle",
+            "lightning-radio-group",
+            "lightning-select",
+            "lightning-spinner",
+            "lightning-tab-bar",
+            "lightning-timepicker",
+            "lightning-vertical-navigation",
+            "lightning-vertical-navigation-section"
+        ],
         "expose": [
             "lightning/accordion",
             "lightning/accordionSection",

package/src/lightning/accordion/__docs__/accordion.md

@@ -231,11 +231,11 @@ To apply custom styling, use the `:host` selector or define a custom class using
 </lightning-accordion>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the border color using the `--sds-c-accordion-color-border` custom property.
+Use SLDS styling hooks to customize the component's styles. For example, specify the border color using the `--slds-c-accordion-color-border` custom property.
 
 ```css
 .example-accordion {
-    --sds-c-accordion-color-border: orange;
+    --slds-c-accordion-color-border: orange;
 }
 ```
 

package/src/lightning/accordion/accordion.css

@@ -1,4 +1,16 @@
+@import 'lightning/sldsCommon';
+@import './accordion.slds.css';
+
 :host {
     display: block;
     list-style: none;
 }
+
+/* To Do: 
+   Remove the code below as it is a duplicate once data-render-mode fix (W-12439890) for ::slotted is in. 
+*/
+/* Removes first child border top */
+::slotted(lightning-accordion-section:first-child) {
+    --slds-c-accordionsection-sizing-border: 0;
+}
+

package/src/lightning/accordion/accordion.html

@@ -1,3 +1,5 @@
 <template>
-    <slot></slot>
+    <div part="accordion">
+        <slot></slot>
+    </div>
 </template>

package/src/lightning/accordion/accordion.js

@@ -1,11 +1,12 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { createAccordionManager } from 'lightning/accordionUtilsPrivate';
 
 /**
  * A collection of vertically stacked sections with multiple content areas.
  * @slot default Placeholder for accordion-section components.
  */
-export default class LightningAccordion extends LightningElement {
+export default class LightningAccordion extends LightningShadowBaseClass {
     privateIsSectionLessInLastRender = true;
     _allowMultipleSectionsOpen = false;
     connected = false;
@@ -30,6 +31,7 @@ export default class LightningAccordion extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.connected = true;
         this.setAttribute('role', 'list');
         this.classList.add('slds-accordion');