lightning-base-components 1.18.2-alpha → 1.18.4-alpha

package/metadata/raptor.json

@@ -3151,6 +3151,9 @@
     "minVersion": "59.0",
     "slotNames": [],
     "properties": [
+      {
+        "name": "displayInfo"
+      },
       {
         "name": "filter"
       },
@@ -3667,6 +3670,7 @@
     ]
   },
   "toast": {
+    "minVersion": "59.0",
     "slotNames": [
       "",
       "message"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.2-alpha",
+    "version": "1.18.4-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1271,18 +1271,25 @@
             "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",
@@ -1290,10 +1297,17 @@
             "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"
         ],

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -1 +1 @@
-export default '242';
+export default '244';

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/avatar/__docs__/avatar.md

@@ -127,22 +127,22 @@ The fallback icon is displayed if the image path is invalid. To apply custom sty
 </lightning-avatar>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the fallback icon using the `--sds-c-icon-color-background` custom property.
+Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the fallback icon using the `--slds-c-icon-color-background` custom property.
 
 ```css
 .my-fallback-color {
-    --sds-c-icon-color-background: orange;
+    --slds-c-icon-color-background: orange;
 }
 ```
 
-`lightning-avatar` contains the same customizable elements as `lightning-icon`, which supports the `--sds-c-icon-*` custom properties. Consider the following guidelines when working with SLDS styling hooks.
+`lightning-avatar` contains the same customizable elements as `lightning-icon`, which supports the `--slds-c-icon-*` custom properties. Consider the following guidelines when working with SLDS styling hooks.
 
 | CSS Custom Property             | `lightning-avatar` Guideline                                                                                                            |
 | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sds-c-avatar-text-color`     | Use with the `initials` attribute and when you specify the `fallback-icon-name` with a standard, utility, doctype, or action icon only. |
-| `--sds-c-avatar-radius-border`  | Adds a rounded border. Alternatively, to create an avatar on a circular background, use the `circle` variant.                           |
-| `--sds-c-icon-color-background` | Use with the `fallback-icon-name` attribute.                                                                                            |
-| `--sds-c-icon-color-foreground` | Use with the `fallback-icon-name` attribute for standard, custom, and action icons only.                                                |
+| `--slds-c-avatar-text-color`     | Use with the `initials` attribute and when you specify the `fallback-icon-name` with a standard, utility, doctype, or action icon only. |
+| `--slds-c-avatar-radius-border`  | Adds a rounded border. Alternatively, to create an avatar on a circular background, use the `circle` variant.                           |
+| `--slds-c-icon-color-background` | Use with the `fallback-icon-name` attribute.                                                                                            |
+| `--slds-c-icon-color-foreground` | Use with the `fallback-icon-name` attribute for standard, custom, and action icons only.                                                |
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/avatar/#Styling-Hooks-Overview) for a list of CSS custom properties.
 

package/src/lightning/badge/__docs__/badge.md

@@ -80,11 +80,11 @@ Alternatively, to apply custom styling, use the `:host` selector or define a cus
 <lightning-badge label="Pending" class="pending-badge"> </lightning-badge>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the badge color using the `--sds-c-badge-color-background` custom property.
+Use SLDS styling hooks to customize the component's styles. For example, specify the badge color using the `--slds-c-badge-color-background` custom property.
 
 ```css
 .pending-badge {
-    --sds-c-badge-color-background: orange;
+    --slds-c-badge-color-background: orange;
 }
 ```
 

package/src/lightning/baseCombobox/baseCombobox.js

@@ -33,6 +33,8 @@ const i18n = {
 const SMALL_MIN_HEIGHT = '2.25rem';
 const MEDIUM_MIN_HEIGHT = '6.75rem';
 const INPUT_ELEMENT_SELECTOR = '.slds-combobox__input';
+const INPUT_PART_ELEMENT_SELECTOR = '[part~="input-text"]';
+const FAUX_INPUT_BUTTON_ELEMENT_SELECTOR = `${INPUT_ELEMENT_SELECTOR}.slds-input_faux`;
 
 /**
  * Breakpoint when viewport height doesn't fit 10 items in the dropdown
@@ -99,11 +101,13 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     originDisableDefaultHighlight;
     privateDisableDefaultHighlight;
     _editingMode = false;
+    _connected = false;
+    ariaObserver = null;
 
     constructor() {
         super();
         this._events = new BaseComboboxEvents(this);
-        this.ariaObserver = new AriaObserver(this);
+        this.setupAriaObserverIfAbsent();
     }
 
     renderedCallback() {
@@ -115,19 +119,13 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
                 },
             })
         );
-
-        if (this.isConnected) {
-            this.ariaObserver.sync();
-        }
-
+        this.syncAriaObserver();
         this.synchronizeA11y();
     }
 
     connectedCallback() {
         super.connectedCallback();
-        if (!this.ariaObserver) {
-            this.ariaObserver = new AriaObserver(this);
-        }
+        this.setupAriaObserverIfAbsent();
         this.overrideDropdownAlignment();
         this.classList.add('slds-combobox_container');
         this._connected = true;
@@ -137,9 +135,19 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     disconnectedCallback() {
         this._connected = false;
         this._listBoxElementCache = undefined;
-        if (this.ariaObserver) {
+        this.removeAriaObserver();
+    }
+
+    setupAriaObserverIfAbsent() {
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
+    }
+
+    removeAriaObserver() {
+        if (this.ariaObserver && this.ariaObserver.disconnect) {
             this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
+            this.ariaObserver = null;
         }
     }
 
@@ -162,6 +170,15 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         this.connectAriaControls();
     }
 
+    syncAriaObserver() {
+        this.setupAriaObserverIfAbsent();
+        const ariaObserverSyncExists =
+            this.ariaObserver && this.ariaObserver.sync;
+        if (this.isConnected && ariaObserverSyncExists) {
+            this.ariaObserver.sync();
+        }
+    }
+
     connectAriaControls() {
         this.connectAriaAttribute({
             attribute: ARIA_CONTROLS,
@@ -171,15 +188,18 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     connectAriaAttribute(params) {
-        const relatedNodeIds = Array.isArray(params.relatedNodeIds)
-            ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
-            : getRealDOMId(params.relatedNodeIds);
-
-        this.ariaObserver.connect({
-            ...params,
-            targetSelector: INPUT_ELEMENT_SELECTOR,
-            relatedNodeIds,
-        });
+        this.setupAriaObserverIfAbsent();
+        if (this.ariaObserver && this.ariaObserver.connect) {
+            const relatedNodeIds = Array.isArray(params.relatedNodeIds)
+                ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
+                : getRealDOMId(params.relatedNodeIds);
+
+            this.ariaObserver.connect({
+                ...params,
+                targetSelector: INPUT_ELEMENT_SELECTOR,
+                relatedNodeIds,
+            });
+        }
     }
 
     @api
@@ -230,7 +250,10 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     set rootAriaNode(root) {
-        this.ariaObserver.root = root;
+        this.setupAriaObserverIfAbsent();
+        if (this.ariaObserver) {
+            this.ariaObserver.root = root;
+        }
     }
 
     get inputId() {
@@ -932,8 +955,25 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
             this._autoPosition = new AutoPosition(this);
         }
 
+        // when using dropdown-alignment='auto' positioning and standard variant lighting-combobox
+        // the selector for 'target' is determined by this.isUserInputDisabled
+        // when TRUE the target is a BUTTON element acting as a faux / fake INPUT element
+        // when FALSE the target is an INPUT element
+        // NOTE: isUserInputDisabled is NOT determined by combobox.disabled
+        // instead isUserInputDisabled is determined by
+        // this.isStandardVariant && !this.isAutocompleteEnabled (which is an internal variable)
+        // this means that the INPUT is often NOT present, and instead a BUTTON is
+        // this selector for .start({ target }) is used to
+        // position the element from so this.isUserInputDisabled
+        // must be taken into account so the proper selector can be used
+        // the 'element' below is always the same without IF/ELSE, so there
+        // is not a need to switch between selectors
+        const selectorToUse = this.isUserInputDisabled
+            ? FAUX_INPUT_BUTTON_ELEMENT_SELECTOR
+            : INPUT_PART_ELEMENT_SELECTOR;
+
         this._autoPosition.start({
-            target: () => this.template.querySelector("[part~='input-text']"),
+            target: () => this.template.querySelector(selectorToUse),
             element: () => this.template.querySelector('div.slds-dropdown'),
             align: {
                 horizontal: Direction.Left,

package/src/lightning/breadcrumbs/__docs__/breadcrumbs.md

@@ -39,12 +39,12 @@ This example adds a margin around the breadcrumbs using an SLDS class.
 </lightning-breadcrumbs>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, adjust the spacing before and after the greater-than sign using the `--sds-c-breadcrumbs-*` custom properties.
+Use SLDS styling hooks to customize the component's styles. For example, adjust the spacing before and after the greater-than sign using the `--slds-c-breadcrumbs-*` custom properties.
 
 ```css
 .my-breadcrumbs {
-    --sds-c-breadcrumbs-spacing-inline-end: 20px;
-    --sds-c-breadcrumbs-spacing-inline-start: 30px;
+    --slds-c-breadcrumbs-spacing-inline-end: 20px;
+    --slds-c-breadcrumbs-spacing-inline-start: 30px;
 }
 ```
 

package/src/lightning/button/__docs__/button.md

@@ -145,11 +145,11 @@ To apply custom styling, use the `:host` selector or define a custom class using
 </lightning-button>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button with `brand` variant using the `--sds-c-button-brand-color-background` custom property.
+Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button with `brand` variant using the `--slds-c-button-brand-color-background` custom property.
 
 ```css
 .my-brand {
-    --sds-c-button-brand-color-background: purple;
+    --slds-c-button-brand-color-background: purple;
 }
 ```
 
@@ -157,16 +157,16 @@ Custom properties for buttons work only with particular `lightning-button` varia
 
 | CSS Custom Property                 | `lightning-button` Variants                      |
 | ----------------------------------- | ------------------------------------------------ |
-| `--sds-c-button-*`                  | all                                              |
-| `--sds-c-button-color-*`            | `base`                                           |
-| `--sds-c-button-text-color-*`       | `neutral` (default), `base`, and `brand-outline` |
-| `--sds-c-button-neutral-*`          | `neutral` (default)                              |
-| `--sds-c-button-brand-*`            | `brand`                                          |
-| `--sds-c-button-outline-brand-*`    | `brand-outline`                                  |
-| `--sds-c-button-destructive-*`      | `destructive`                                    |
-| `--sds-c-button-text-destructive-*` | `destructive-text`                               |
-| `--sds-c-button-inverse-*`          | `inverse`                                        |
-| `--sds-c-button-success-*`          | `success`                                        |
+| `--slds-c-button-*`                  | all                                              |
+| `--slds-c-button-color-*`            | `base`                                           |
+| `--slds-c-button-text-color-*`       | `neutral` (default), `base`, and `brand-outline` |
+| `--slds-c-button-neutral-*`          | `neutral` (default)                              |
+| `--slds-c-button-brand-*`            | `brand`                                          |
+| `--slds-c-button-outline-brand-*`    | `brand-outline`                                  |
+| `--slds-c-button-destructive-*`      | `destructive`                                    |
+| `--slds-c-button-text-destructive-*` | `destructive-text`                               |
+| `--slds-c-button-inverse-*`          | `inverse`                                        |
+| `--slds-c-button-success-*`          | `success`                                        |
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
@@ -186,9 +186,9 @@ We don't support changing the label alignment on the button. To adjust the paddi
 
 To address text wrapping in long labels when the browser viewport is reduced, customize the line height and block spacing of the button label using SLDS styling hooks.
 
--   `--sds-c-button-line-height`
--   `--sds-c-button-spacing-block-start`
--   `--sds-c-button-spacing-block-end`
+-   `--slds-c-button-line-height`
+-   `--slds-c-button-spacing-block-start`
+-   `--slds-c-button-spacing-block-end`
 
 On mobile screens, we recommend setting the button size to
 44x44 px. If you have more than one target on a screen that performs the same action, only one of the targets need to meet the target size of 44x44 px. For more information, see [Follow Accessible Mobile Design Guidelines

package/src/lightning/buttonIcon/__docs__/buttonIcon.md

@@ -128,26 +128,26 @@ To apply custom styling, use the `:host` selector or define a custom class using
 ></lightning-button-icon>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the border radius using the `--sds-c-button-radius-border` custom property.
+Use SLDS styling hooks to customize the component's styles. For example, specify the border radius using the `--slds-c-button-radius-border` custom property.
 
 ```css
 .my-round-button {
-    --sds-c-button-radius-border: 20px;
+    --slds-c-button-radius-border: 20px;
 }
 ```
 
-`lightning-button-icon` contains the same customizable elements as `lightning-button`, which supports `--sds-c-button-*` custom properties.
+`lightning-button-icon` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties.
 
 Custom properties for button icons work only with particular `lightning-button` variants.
 
 | CSS Custom Property               | `lightning-button-icon` Variants                             |
 | --------------------------------- | ------------------------------------------------------------ |
-| `--sds-c-button-color-background` | `border` (default), `bare`, `bare-inverse`, and `container`  |
-| `--sds-c-button-color-border`     | `bare`, `bare-inverse`, and `container`                      |
-| `--sds-c-button-text-color`       | N/A                                                          |
-| `--sds-c-button-text-color-*`     | `border` (default), `bare`, `container`, and `border-filled` |
-| `--sds-c-button-radius-border`    | all                                                          |
-| `--sds-c-button-sizing-border`    | `bare`, `bare-inverse`, `border-inverse` and `container`     |
+| `--slds-c-button-color-background` | `border` (default), `bare`, `bare-inverse`, and `container`  |
+| `--slds-c-button-color-border`     | `bare`, `bare-inverse`, and `container`                      |
+| `--slds-c-button-text-color`       | N/A                                                          |
+| `--slds-c-button-text-color-*`     | `border` (default), `bare`, `container`, and `border-filled` |
+| `--slds-c-button-radius-border`    | all                                                          |
+| `--slds-c-button-sizing-border`    | `bare`, `bare-inverse`, `border-inverse` and `container`     |
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for a list of CSS custom properties.
 

package/src/lightning/buttonIconStateful/__docs__/buttonIconStateful.md

@@ -119,26 +119,26 @@ To apply custom styling, use the `:host` selector or define a custom class using
 ></lightning-button-icon-stateful>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button using the `--sds-c-button-color-background` custom property.
+Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button using the `--slds-c-button-color-background` custom property.
 
 ```css
 .my-brand {
-    --sds-c-button-color-background: purple;
+    --slds-c-button-color-background: purple;
 }
 ```
 
-`lightning-button-icon-stateful` contains the same customizable elements as `lightning-button`, which supports `--sds-c-button-*` custom properties.
+`lightning-button-icon-stateful` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties.
 
 Custom properties for stateful button icons work only with particular `lightning-button-icon-stateful` variants.
 
 | CSS Custom Property               | `lightning-button-icon-stateful` Variants |
 | --------------------------------- | ----------------------------------------- |
-| `--sds-c-button-color-background` | `border` (default) and `border-inverse`   |
-| `--sds-c-button-color-border`     | N/A                                       |
-| `--sds-c-button-text-color`       | N/A                                       |
-| `--sds-c-button-text-color-*`     | `border` (default) and `border-filled`    |
-| `--sds-c-button-radius-border`    | all                                       |
-| `--sds-c-button-sizing-border`    | N/A                                       |
+| `--slds-c-button-color-background` | `border` (default) and `border-inverse`   |
+| `--slds-c-button-color-border`     | N/A                                       |
+| `--slds-c-button-text-color`       | N/A                                       |
+| `--slds-c-button-text-color-*`     | `border` (default) and `border-filled`    |
+| `--slds-c-button-radius-border`    | all                                       |
+| `--slds-c-button-sizing-border`    | N/A                                       |
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for a list of CSS custom properties.
 

package/src/lightning/buttonMenu/__docs__/buttonMenu.md

@@ -202,22 +202,22 @@ Use SLDS styling hooks to customize the component's styles. For example, specify
 
 ```css
 .my-button-menu {
-    --sds-c-button-color-background: orange;
+    --slds-c-button-color-background: orange;
 }
 ```
 
-`lightning-button-menu` contains the same customizable elements as `lightning-button`, which supports `--sds-c-button-*` custom properties.
+`lightning-button-menu` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties.
 
 Custom properties for button menus work only with particular `lightning-button-menu` variants.
 
 | CSS Custom Property               | `lightning-button-menu` Variants                                                                            |
 | --------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `--sds-c-button-color-background` | `border` (default), `bare`, `bare-inverse`, and `container`                                                 |
-| `--sds-c-button-color-border`     | `bare`, `bare-inverse`, and `container`                                                                     |
-| `--sds-c-button-text-color`       | `border` (default), `bare`, `bare-inverse`,`container`, and `border-filled`; use with the `label` attribute |
-| `--sds-c-button-text-color-*`     | `border` (default), `bare`, `container`, and `border-filled`                                                |
-| `--sds-c-button-radius-border`    | all                                                                                                         |
-| `--sds-c-button-sizing-border`    | `bare`, `bare-inverse`, `border-inverse` and `container`                                                    |
+| `--slds-c-button-color-background` | `border` (default), `bare`, `bare-inverse`, and `container`                                                 |
+| `--slds-c-button-color-border`     | `bare`, `bare-inverse`, and `container`                                                                     |
+| `--slds-c-button-text-color`       | `border` (default), `bare`, `bare-inverse`,`container`, and `border-filled`; use with the `label` attribute |
+| `--slds-c-button-text-color-*`     | `border` (default), `bare`, `container`, and `border-filled`                                                |
+| `--slds-c-button-radius-border`    | all                                                                                                         |
+| `--slds-c-button-sizing-border`    | `bare`, `bare-inverse`, `border-inverse` and `container`                                                    |
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for a list of CSS custom properties.
 

package/src/lightning/buttonStateful/__docs__/buttonStateful.md

@@ -123,29 +123,29 @@ To apply custom styling, use the `:host` selector or define a custom class using
 </lightning-button-stateful>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the background and text color on the button using the `--sds-c-button-*` custom properties.
+Use SLDS styling hooks to customize the component's styles. For example, specify the background and text color on the button using the `--slds-c-button-*` custom properties.
 
 ```css
 .my-button {
-    --sds-c-button-neutral-color-background: orange;
-    --sds-c-button-text-color: white;
+    --slds-c-button-neutral-color-background: orange;
+    --slds-c-button-text-color: white;
 }
 ```
 
-`lightning-button-stateful` contains the same customizable elements as `lightning-button`, which supports `--sds-c-button-*` custom properties.
+`lightning-button-stateful` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties.
 
 Custom properties for stateful buttons work only with particular `lightning-button-stateful` variants.
 
 | CSS Custom Property            | `lightning-button-stateful` Variants |
 | ------------------------------ | ------------------------------------ |
-| `--sds-c-button-*`             | all                                  |
-| `--sds-c-button-color-*`       | `base`                               |
-| `--sds-c-button-text-color-*`  | `neutral` (default) and `text`       |
-| `--sds-c-button-neutral-*`     | `neutral` (default)                  |
-| `--sds-c-button-brand-*`       | `brand`                              |
-| `--sds-c-button-destructive-*` | `destructive`                        |
-| `--sds-c-button-inverse-*`     | `inverse`                            |
-| `--sds-c-button-success-*`     | `success`                            |
+| `--slds-c-button-*`             | all                                  |
+| `--slds-c-button-color-*`       | `base`                               |
+| `--slds-c-button-text-color-*`  | `neutral` (default) and `text`       |
+| `--slds-c-button-neutral-*`     | `neutral` (default)                  |
+| `--slds-c-button-brand-*`       | `brand`                              |
+| `--slds-c-button-destructive-*` | `destructive`                        |
+| `--slds-c-button-inverse-*`     | `inverse`                            |
+| `--slds-c-button-success-*`     | `success`                            |
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for a list of CSS custom properties.
 

package/src/lightning/calendar/calendar.css

@@ -1,5 +1,5 @@
-/* @import 'lightning/sldsCommon';
-@import './calendar.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './calendar.slds.css';
 
 /**
  * For RTL languages, slds-dropdown_left will have left: 0 swapped with right: 0 which is why we

package/src/lightning/calendar/calendar.js

@@ -3,7 +3,8 @@ import labelNextMonth from '@salesforce/label/LightningDateTimePicker.nextMonth'
 import labelPreviousMonth from '@salesforce/label/LightningDateTimePicker.previousMonth';
 import labelToday from '@salesforce/label/LightningDateTimePicker.today';
 import labelYearSelector from '@salesforce/label/LightningDateTimePicker.yearSelector';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { generateUniqueId } from 'lightning/inputUtils';
 import firstDayOfWeek from '@salesforce/i18n/firstDayOfWeek';
@@ -45,7 +46,7 @@ const JAPANESE_CALENDAR_YEARS = [
     { key: 'M', year: 1868, label: '\u660e\u6cbb' }, // Meiji:   1/1/1868
 ];
 
-export default class LightningCalendar extends LightningElement {
+export default class LightningCalendar extends LightningShadowBaseClass {
     @track calendarYear = null;
     @track calendarMonth = null;
 
@@ -93,6 +94,7 @@ export default class LightningCalendar extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
 
         this.todayDate = getCurrentDateString();

package/src/lightning/card/__docs__/card.md

@@ -90,8 +90,8 @@ To apply custom styling, use the `:host` selector. Use SLDS styling hooks to cus
 
 ```css
 :host {
-    --sds-c-card-heading-font-weight: 500px;
-    --sds-c-card-body-spacing-inline-start: 20px;
+    --slds-c-card-heading-font-weight: 500px;
+    --slds-c-card-body-spacing-inline-start: 20px;
 }
 ```
 
@@ -111,4 +111,4 @@ This component has usage differences from its Aura counterpart. See [Base Compon
 
 #### Source Code
 
-`lightning-card` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.
+`lightning-card` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/checkboxGroup/__docs__/checkboxGroup.md

@@ -175,8 +175,8 @@ To apply custom styling, use the `:host` selector. Use SLDS styling hooks to cus
 
 ```css
 :host {
-    --sds-c-checkbox-color-background-checked: green;
-    --sds-c-checkbox-mark-color-foreground: yellow;
+    --slds-c-checkbox-color-background-checked: green;
+    --slds-c-checkbox-mark-color-foreground: yellow;
 }
 ```