lightning-base-components 1.18.8-ssr → 1.19.1-alpha

package/src/lightning/accordionSection/accordionSection.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { generateUniqueId } from 'lightning/inputUtils';
 import { keyCodes, isHeadingLevelValid } from 'lightning/utilsPrivate';
 import { classSet } from 'lightning/utils';
@@ -11,7 +10,7 @@ import DIR from '@salesforce/i18n/dir';
  * Actions are displayed at the top right corner of the accordion section.
  * @slot default Placeholder for your content in the accordion section.
  */
-export default class LightningAccordionSection extends LightningShadowBaseClass {
+export default class LightningAccordionSection extends LightningElement {
     /**
      * The unique section name to use with the active-section-name attribute in the accordion component.
      * @type {string}
@@ -59,7 +58,6 @@ export default class LightningAccordionSection extends LightningShadowBaseClass
     privateUniqueId = generateUniqueId('lgt-accordion-section');
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'listitem');
         this.classList.add('slds-accordion__list-item');
         this.registerSectionWithParent();

package/src/lightning/avatar/__docs__/avatar.md

@@ -146,7 +146,7 @@ Use SLDS styling hooks to customize the component's styles. For example, specify
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/avatar/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 To understand how we implemented SLDS in `lightning-avatar`, see the **Source Code** section.
 

package/src/lightning/avatar/avatar.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './avatar.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './avatar.slds.css'; */

package/src/lightning/avatar/avatar.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString, reflectAttribute } from 'lightning/utilsPrivate';
 import { computeSldsClass } from 'lightning/iconUtils';
@@ -10,7 +9,7 @@ const DEFAULT_VARIANT = 'square';
 /**
  * A visual representation of an object.
  */
-export default class LightningAvatar extends LightningShadowBaseClass {
+export default class LightningAvatar extends LightningElement {
     /**
      * The alternative text used to describe the avatar, which is displayed as
      * hover text on the image.

package/src/lightning/avatar/avatar.slds.css

@@ -8,39 +8,39 @@
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -50,15 +50,15 @@
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -154,7 +154,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
@@ -172,6 +172,11 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
+  /* re-assign icon color hook for avatar */
+  :host([data-render-mode="shadow"]) {
+    --sds-c-icon-color-background: var(--slds-c-avatar-color-background);
+  }
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -242,19 +247,13 @@
   :host([data-render-mode="shadow"]) .slds-avatar__initials {
     display: flex;
     justify-content: center;
-    -ms-flex-line-pack: center;
     align-content: center;
     align-items: center;
     margin: auto;
     color: var(--slds-c-avatar-text-color);
     height: 100%;
-    text-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    background-color: var(
-      --slds-c-avatar-color-background,
-      var(--sds-c-icon-color-background, var(--sds-g-color-brand-base-50, #0176d3))
-    );
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
+    background-color: var(--slds-c-avatar-color-background, var(--sds-g-color-brand-base-50, #0176d3));
   }
 
   :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {

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

@@ -90,7 +90,7 @@ Use SLDS styling hooks to customize the component's styles. For example, specify
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/badges/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 To understand how we implemented SLDS in `lightning-badge`, see the **Source Code** section.
 

package/src/lightning/badge/__examples__/basic/basic.html

@@ -5,10 +5,8 @@
         </h2>
 
         <!-- Badge: basic -->
-        <lightning-badge label="Alpha"></lightning-badge>
+        <lightning-badge label="Alpha" class="slds-badge_inverse"></lightning-badge>
         <lightning-badge label="Beta"></lightning-badge>
         <lightning-badge label="Gamma"></lightning-badge>
-        <lightning-badge label="Inverse" class="slds-badge_inverse"></lightning-badge>
-        <lightning-badge label="Lightest" class="slds-badge_lightest"></lightning-badge>
     </div>
 </template>

package/src/lightning/badge/badge.html

@@ -1,19 +1,17 @@
 <template>
-    <span part="badge">
-        <template if:false={isIconBeforeLabel}>
-            {label}
-        </template>
-    
-        <template if:true={iconName}>
-            <span class={computedClass}>
-                <span class="slds-icon_container slds-current-color" title={iconAlternativeText}>
-                    <lightning-primitive-icon icon-name={iconName} size="xx-small"></lightning-primitive-icon>
-                </span>
+    <template if:false={isIconBeforeLabel}>
+        {label}
+    </template>
+
+    <template if:true={iconName}>
+        <span class={computedClass}>
+            <span class="slds-icon_container slds-current-color" title={iconAlternativeText}>
+                <lightning-primitive-icon icon-name={iconName} size="xx-small"></lightning-primitive-icon>
             </span>
-        </template>
-        
-        <template if:true={isIconBeforeLabel}>
-            {label}
-        </template>
-    </span>
+        </span>
+    </template>
+ 
+    <template if:true={isIconBeforeLabel}>
+        {label}
+    </template>
 </template>

package/src/lightning/badge/badge.js

@@ -1,7 +1,6 @@
-import { api } from 'lwc';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString } from 'lightning/utilsPrivate';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const DEFAULT_POSITION = 'start';
 
@@ -9,7 +8,7 @@ const DEFAULT_POSITION = 'start';
  * Represents a label which holds a small amount of information, such as the
  * number of unread notifications.
  */
-export default class LightningBadge extends LightningShadowBaseClass {
+export default class LightningBadge extends LightningElement {
     /**
      * Normalized icon position
      */
@@ -56,7 +55,6 @@ export default class LightningBadge extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-badge');
     }
 

package/src/lightning/barcodeScanner/__docs__/barcodeScanner.md

@@ -1,4 +1,4 @@
-The `lightning-barcode-scanner` component embeds a barcode scanning function displayed as an icon, which launches the barcode scanner when the user clicks it. For more information on the the API this component uses, see [Use the BarcodeScanner API](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_barcodescanner_in_a_lightning_component) in the Lightning Web Components Developer Guide.
+The `lightning-barcode-scanner` component embeds a barcode scanning function displayed as an icon, which launches the barcode scanner when the user clicks it. For more information on the the API this component uses, see [Use the BarcodeScanner API](https://developer.salesforce.com/docs/platform/lwc/guide/use-barcodescanner-in-a-lightning-component) in the Lightning Web Components Developer Guide.
 
 ```html
 <template>
@@ -29,7 +29,7 @@ To enable continuous scanning, set the `enable-continuous-scan` attribute.
 
 #### Scanner Options
 
-The BarcodeScanner API for `lightning-barcode-scanner` supports various scanner options. For the list of barcode scanner option properties, see [BarcodeScannerOptions](docs/component-library/documentation/en/lwc/lwc.reference_lightning_barcodescanner_data_types) in the Lightning Web Components Developer Guide.
+The BarcodeScanner API for `lightning-barcode-scanner` supports various scanner options. For the list of barcode scanner option properties, see [BarcodeScannerOptions](https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-barcodescanner-data-types) in the Lightning Web Components Developer Guide.
 
 You can configure various scanner options for a scanning session. For example, if you want your component to support only a specific set of barcode types, specify the types as a list in the `barcodeTypes` property. If you want to modify the size of the scanner camera view, specify the size in the `scannerSize` property. In this example, the barcode scanner supports only the specified types `CODE_128`,`EAN_13`, and `QR`, and will ignore the other types, and the barcode scanner camera view is changed to `LARGE`.