lightning-base-components 1.18.2-alpha → 1.18.3-alpha

package/src/lightning/inputAddress/__docs__/inputAddress.md

@@ -60,7 +60,7 @@ This example creates an address compound field with attributes to specify values
         onchange={handleChange} ></lightning-input-address>
 ```
 
-To bind the input value on the address fields, use the `event.target` property. 
+To bind the input value on the address fields, use the `event.target` property.
 
 ```js
 import { LightningElement } from 'lwc';
@@ -270,8 +270,8 @@ For example, change the minimum height of the textarea and change the background
 
 ```css
 :host {
-    --sds-c-textarea-sizing-min-height: 200px;
-    --sds-c-input-color-background: orange;
+    --slds-c-textarea-sizing-min-height: 200px;
+    --slds-c-input-color-background: orange;
 }
 ```
 

package/src/lightning/inputUtils/inputUtils.js

@@ -6,23 +6,18 @@ export {
     FieldConstraintApiWithProxyInput,
     FieldConstraintApi,
 } from './validity';
-export { normalizeVariant, VARIANT } from './normalize';
-
-export function isEmptyString(s) {
-    return (
-        s === undefined ||
-        s === null ||
-        (typeof s === 'string' && s.trim() === '')
-    );
-}
-
-export function isEmptyObject(obj) {
-    if (obj === undefined || obj === null || typeof obj !== 'object') {
-        return false;
-    }
-    // eslint-disable-next-line guard-for-in
-    for (const name in obj) {
-        return false;
-    }
-    return true;
-}
+export { normalizeInput, normalizeVariant, VARIANT } from './normalize';
+export { isValidEmail, isValidMultipleEmails } from './email';
+export {
+    calculateFractionDigitsFromStep,
+    formatNumber,
+    fromIsoDecimal,
+    hasValidNumberShortcut,
+    hasValidNumberSymbol,
+    increaseNumberByStep,
+    isValidNumber,
+    isValidNumberCharacter,
+    stringifyNumber,
+    toIsoDecimal,
+} from './number';
+export { isEmptyString, isEmptyObject } from './utils';

package/src/lightning/inputUtils/normalize.js

@@ -23,3 +23,10 @@ export function normalizeVariant(value) {
         ],
     });
 }
+
+export function normalizeInput(value) {
+    if (typeof value === 'number' || typeof value === 'string') {
+        return String(value);
+    }
+    return '';
+}

package/src/lightning/{input/numberUtil.js → inputUtils/number.js}

@@ -5,7 +5,7 @@ import {
     toLocalizedDigits,
     numberFormat,
 } from 'lightning/internationalizationLibrary';
-import { isEmptyString } from 'lightning/inputUtils';
+import { isEmptyString } from './utils';
 import { normalizeNumber } from 'lightning/utilsPrivate';
 
 const VALID_NUMBER_CHARACTERS_EXPRESSION = new RegExp(

package/src/lightning/inputUtils/utils.js

@@ -0,0 +1,18 @@
+export function isEmptyString(s) {
+    return (
+        s === undefined ||
+        s === null ||
+        (typeof s === 'string' && s.trim() === '')
+    );
+}
+
+export function isEmptyObject(obj) {
+    if (obj === undefined || obj === null || typeof obj !== 'object') {
+        return false;
+    }
+    // eslint-disable-next-line guard-for-in
+    for (const name in obj) {
+        return false;
+    }
+    return true;
+}

package/src/lightning/modalBody/__docs__/modalBody.md

@@ -1,10 +1,10 @@
 The `lightning-modal-body` component renders the content of a modal.
 
-The modal components render in the order they appear in the template. Place the `lightning-modal-body` 
-component after `lightning-modal-header` and before `lightning-modal-footer` components, if you're providing them. 
+The modal components render in the order they appear in the template. Place the `lightning-modal-body`
+component after `lightning-modal-header` and before `lightning-modal-footer` components, if you're providing them.
 
 This sample code shows the expected order of the modal components. The modal content is
-created in a separate component extended from `LightningModal`. See 
+created in a separate component extended from `LightningModal`. See
 [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
 
 ```html
@@ -24,8 +24,8 @@ created in a separate component extended from `LightningModal`. See
 </template>
 ```
 
-You can nest content in `lightning-modal-body` or 
-`lightning-modal-body` automatically scrolls the modal's content when necessary. 
+You can nest content in `lightning-modal-body` or
+`lightning-modal-body` automatically scrolls the modal's content when necessary.
 The modal's maximum height is calculated to prevent the content from exceeding the screen height,
 and scroll bars are automatically added.
 #### Component Styling
@@ -36,18 +36,18 @@ To apply custom styling, use the `:host` selector or define a custom class using
 
 ```html
 <lightning-modal-body class="my-modal-body">
-   
+
 </lightning-modal-body>
 ```
 
-Use SLDS styling hooks to customize the component's styles. The `--sds-c-modal-content-*` hooks 
-enable you to customize the background color and text color of the modal body. 
+Use SLDS styling hooks to customize the component's styles. The `--slds-c-modal-content-*` hooks
+enable you to customize the background color and text color of the modal body.
 
 For example, specify the background color on the modal using the `sds-c-modal-content-color-background` custom property.
 
 ```css
 .my-modal-body {
-    --sds-c-modal-content-color-background: LightBlue;
+    --slds-c-modal-content-color-background: LightBlue;
 }
 ```
 

package/src/lightning/modalFooter/__docs__/modalFooter.md

@@ -1,14 +1,14 @@
-The `lightning-modal-footer` component creates a footer at the bottom of a modal dialog. 
+The `lightning-modal-footer` component creates a footer at the bottom of a modal dialog.
 Use of a footer is optional.
 
 The modal components render in the order they appear in the template.
 Place the `lightning-modal-footer` component after the `lightning-modal-body` component.
 
 This sample code shows the expected order of the modal components. The modal content is
-created in a separate component extended from `LightningModal`. See 
+created in a separate component extended from `LightningModal`. See
 [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
 
-This sample's `lightning-modal-footer` includes two `lightning-button` components, 
+This sample's `lightning-modal-footer` includes two `lightning-button` components,
 but you can also use `<button>` elements.
 
 ```html
@@ -25,7 +25,7 @@ but you can also use `<button>` elements.
             variant="neutral"
             label="Cancel"
             onclick={handleDismiss}
-        ></lightning-button>                
+        ></lightning-button>
         <lightning-button
             class="slds-button slds-m-left_x-small"
             variant="brand"
@@ -42,18 +42,18 @@ To apply custom styling, use the `:host` selector or define a custom class using
 
 ```html
 <lightning-modal-footer class="my-modal-footer">
-   
+
 </lightning-modal-footer>
 ```
 
-Use SLDS styling hooks to customize the component's styles. Several `--sds-c-modal-footer-*` hooks 
-enable you to customize the footer spacing, background color, and text color. 
+Use SLDS styling hooks to customize the component's styles. Several `--slds-c-modal-footer-*` hooks
+enable you to customize the footer spacing, background color, and text color.
 
 For example, specify the background color on the footer using the `sds-c-modal-footer-color-background` custom property.
 
 ```css
 .my-modal-footer {
-    --sds-c-modal-footer-color-background: LightGray;
+    --slds-c-modal-footer-color-background: LightGray;
 }
 ```
 
@@ -66,7 +66,7 @@ For more information, see [Style Components Using Lightning Design System Stylin
 If you add buttons to the footer, you can use the accessibility attributes described in [`lightning-button`](bundle/lightning-button/documentation).
 
 When the modal opens, focus goes to the first interactive element in the modal. If there are no links in the header or any interactive elements
-in the modal body, the first footer button gets initial focus. 
+in the modal body, the first footer button gets initial focus.
 
 See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.
 

package/src/lightning/modalHeader/__docs__/modalHeader.md

@@ -1,18 +1,18 @@
 The `lightning-modal-header` component displays header text in a panel at the top of a modal dialog.
-Use of a header is optional, but when you provide a header you must specify the header text with the `label` attribute. 
+Use of a header is optional, but when you provide a header you must specify the header text with the `label` attribute.
 
 If you don't use the `lightning-modal-header` component, you must set a label
 in the modal you create by extending `LightningModal`. A label is required for accessibility.
 
-The modal components render in the order they appear in the template. Place the `lightning-modal-header` 
+The modal components render in the order they appear in the template. Place the `lightning-modal-header`
 component before the `lightning-modal-body` component in the template.
 
 `lightning-modal-header` supports optional tagline text, which displays in smaller text below the heading. Enclose the
 tagline text directly in the `lightning-modal-header` component, no HTML tag or attribute is needed. You can include links with `<a>`
-tags, which are the only HTML elements permitted. If the header text is too long to fit on one line, it wraps in the modal header. 
+tags, which are the only HTML elements permitted. If the header text is too long to fit on one line, it wraps in the modal header.
 
 This sample code shows the expected order of the modal components. The modal content is
-created in a separate component extended from `LightningModal`. See 
+created in a separate component extended from `LightningModal`. See
 [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
 
 ```html
@@ -34,18 +34,18 @@ To apply custom styling, use the `:host` selector or define a custom class using
 
 ```html
 <lightning-modal-header label="My Modal" class="my-modal-header">
-   
+
 </lightning-modal-header>
 ```
 
-Use SLDS styling hooks to customize the component's styles. Several `--sds-c-modal-header-*` and `--sds-c-modal-heading-*` hooks 
-enable you to customize the header. 
+Use SLDS styling hooks to customize the component's styles. Several `--slds-c-modal-header-*` and `--slds-c-modal-heading-*` hooks
+enable you to customize the header.
 
 For example, specify the background color on the button using the `sds-c-modal-header-color-background` custom property.
 
 ```css
 .my-modal-header {
-    --sds-c-modal-header-color-background: LightGray;
+    --slds-c-modal-header-color-background: LightGray;
 }
 ```
 
@@ -59,6 +59,6 @@ When you use `lightning-modal-header` in your modal, the rendered modal provides
 If you don't use `lightning-modal-header`, the accessible label is provided using `aria-label` set to the label you provide in the modal.
 
 When the modal opens, focus goes to the first interactive element in the modal. If the header includes a link in tagline text, the link
-gets initial focus. 
+gets initial focus.
 
 See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.

package/src/lightning/overlayContainer/overlayContainer.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, createElement } from 'lwc';
+import { api, createElement } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { parent, instanceName } from 'lightning/overlayUtils';
 import { guid } from 'lightning/utilsPrivate';
 import {
@@ -16,7 +17,7 @@ import {
     LWC_OVERLAY_ENGINE,
 } from 'lightning/overlayManager';
 
-export default class LightningOverlayContainer extends LightningElement {
+export default class LightningOverlayContainer extends LightningShadowBaseClass {
     // overlayContainer has this.stack, which holds the details, and actual
     // DOM elements of local (this file) LWC overlays only, while
     // overlayManager has this.state.stack, which only tracks details of
@@ -188,6 +189,7 @@ export default class LightningOverlayContainer extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         // Notified anytime an overlay is added/removed
         // LWC overlays start on z-index 9000; always even z-index (9000, 9002)
         // Aura overlays start on z-index 9001; always on odd z-index (9001, 9003)

package/src/lightning/pill/__docs__/pill.md

@@ -159,15 +159,15 @@ To apply custom styling, define a custom class using the `class` attribute.
 <lightning-pill label="Astro" class="my-pill"></lightning-pill>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the pill using the `--sds-c-pill-color-background` custom property.
+Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the pill using the `--slds-c-pill-color-background` custom property.
 
 ```css
 .my-pill {
-    --sds-c-pill-color-background: orange;
+    --slds-c-pill-color-background: orange;
 }
 ```
 
-Additionally, the remove button contains customizable elements similar to `lightning-button-icon`. You can customize the styles on the remove button using the `--sds-c-button-*` custom properties. See the [lightning-button-icon documentation](bundle/lightning-button-icon/documentation).
+Additionally, the remove button contains customizable elements similar to `lightning-button-icon`. You can customize the styles on the remove button using the `--slds-c-button-*` custom properties. See the [lightning-button-icon documentation](bundle/lightning-button-icon/documentation).
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/pills/#Styling-Hooks-Overview) for a list of CSS custom properties.
 

package/src/lightning/pillContainer/__docs__/pillContainer.md

@@ -11,9 +11,9 @@ selections when filtering a list, such as from a multi-select picklist.
 
 `lightning-pill-container` displays a pill using the `lightning-pill` component, which can display an icon or avatar next to the text label.
 
-To specify the pills, set the `items` attribute to an array of values in your component's JavaScript. 
+To specify the pills, set the `items` attribute to an array of values in your component's JavaScript.
 
-By default, all pills in the container are displayed and wrap to additional lines if they can't fit on one line. 
+By default, all pills in the container are displayed and wrap to additional lines if they can't fit on one line.
 For information about changing the behavior, see **Managing Pill Layout in the Container**.
 
 This example creates three pills: a text-only pill, a pill with an avatar, and
@@ -131,7 +131,7 @@ export default class PillContainerRemoveExample extends LightningElement {
 Several boolean attributes let you control the layout of pills in the container. These attributes are
 set to false by default, which makes all pills display and wrap to multiple lines.
 
-- `is-collapsible`: Determines whether the list of pills can be expanded and collapsed. If `is-collapsible` is true, `is-expanded` can determine whether a pill list displays all the pills or one line of pills. If `is-collapsible` is false or not specified, the `is-expanded` attribute has no effect regardless of its value. 
+- `is-collapsible`: Determines whether the list of pills can be expanded and collapsed. If `is-collapsible` is true, `is-expanded` can determine whether a pill list displays all the pills or one line of pills. If `is-collapsible` is false or not specified, the `is-expanded` attribute has no effect regardless of its value.
 - `is-expanded`: Determines whether the full list of pills is shown. Set `is-collapsible` to true if you want to set `is-expanded` to expand and collapse the list. If you set `is-expanded` to false and don't set `is-collapsible` to true, the list is expanded.
 - `single-line`: Specifies that the pill container can display one line of pills. By default, if pills can't fit on one line, they are wrapped to additional lines to fit the container. Set `single-line` to true to limit pill display to one line. This attribute overrides `is-collapsible` and `is-expanded`.
 
@@ -156,11 +156,11 @@ This example sets `is-collapsible` and uses a button to change the value of `is-
             >
             </lightning-pill-container>
     </div>
-    <lightning-button onclick={setExpanded} label="Expand and Collapse"></lightning-button> 
+    <lightning-button onclick={setExpanded} label="Expand and Collapse"></lightning-button>
 </template>
 ```
 
-The list of pills is initially collapsed. The button expands and collapses the list. 
+The list of pills is initially collapsed. The button expands and collapses the list.
 
 ```javascript
 import { LightningElement } from 'lwc';
@@ -173,7 +173,7 @@ export default class PillContainerCanCollapse extends LightningElement {
     }
 
     items = [
-        { 
+        {
         //define the pills
         }
     ];
@@ -213,7 +213,7 @@ handlePillExpansion(){
 }
 
     items = [
-        { 
+        {
         //define the pills
         }
     ];
@@ -234,18 +234,18 @@ To apply additional styling, use the SLDS [utility classes](https://www.lightnin
 
 To apply custom styling, use the `:host` selector or define a custom class using the `class` attribute. Use SLDS styling hooks to customize the component's styles.
 
-`lightning-pill-container` renders pills using `lightning-pill`. Use the `--sds-c-pill-*` custom properties on `lightning-pill`.
+`lightning-pill-container` renders pills using `lightning-pill`. Use the `--slds-c-pill-*` custom properties on `lightning-pill`.
 
 Custom properties for pill containers work only with particular `lightning-pill-container` variants for the remove button.
 
 | CSS Custom Property                     | `lightning-pill-container` Variants |
 | --------------------------------------- | ----------------------------------- |
-| `--sds-c-icon-color-background`         | `standard` (default)                |
-| `--sds-c-icon-color-foreground-default` | `standard` (default)                |
-| `--sds-c-button-color-background`       | `bare`                              |
-| `--sds-c-button-color-border`           | `bare`                              |
-| `--sds-c-button-radius-border`          | `bare`                              |
-| `--sds-c-button-sizing-border`          | `bare`                              |
+| `--slds-c-icon-color-background`         | `standard` (default)                |
+| `--slds-c-icon-color-foreground-default` | `standard` (default)                |
+| `--slds-c-button-color-background`       | `bare`                              |
+| `--slds-c-button-color-border`           | `bare`                              |
+| `--slds-c-button-radius-border`          | `bare`                              |
+| `--slds-c-button-sizing-border`          | `bare`                              |
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/pills/#Styling-Hooks-Overview) for a list of CSS custom properties.
 

package/src/lightning/primitiveIcon/primitiveIcon.js

@@ -1,12 +1,12 @@
 import { api } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 
 import standardTemplate from './primitiveIcon.html';
 import iconStylesheets from './primitiveIcon.css';
 
-import { getName, isValidName, polyfill } from 'lightning/iconUtils';
+import { getName, isValidName } from 'lightning/iconUtils';
 import dir from '@salesforce/i18n/dir';
 import { fetchIconLibrary, hasIconLibrary, getIconLibrary } from './fetch';
 
@@ -70,7 +70,12 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
         if (this.category) {
             try {
                 this._iconLibrary = null;
-                this._iconLibrary = await fetchIconLibrary(dir, this.category);
+                if (isCSR) {
+                    this._iconLibrary = await fetchIconLibrary(
+                        dir,
+                        this.category
+                    );
+                }
             } catch (e) {
                 // eslint-disable-next-line no-console
                 console.warn(
@@ -83,8 +88,6 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
     renderedCallback() {
         if (this.isReady || this.iconName !== this.prevIconName) {
             this.prevIconName = this.iconName;
-            const svgElement = this.template.querySelector('svg');
-            polyfill(svgElement);
         }
     }
 

package/src/lightning/radioGroup/__docs__/radioGroup.md

@@ -158,11 +158,11 @@ To apply custom styling, use the `:host` selector or define a custom class using
 </lightning-radio-group>
 ```
 
-When using `type="button"`, you can change the line height of the button label with SLDS styling hooks. For example, use `--sds-c-button-line-height` to reduce or increase the whitespace between lines of the text label.
+When using `type="button"`, you can change the line height of the button label with SLDS styling hooks. For example, use `--slds-c-button-line-height` to reduce or increase the whitespace between lines of the text label.
 
 ```css
 .my-radio-group {
-    --sds-c-button-line-height: 2.875rem;
+    --slds-c-button-line-height: 2.875rem;
 }
 ```
 
@@ -170,8 +170,8 @@ When using `type="radio"`, customize the component's styles using SLDS styling h
 
 ```css
 :host {
-    --sds-c-radio-mark-color-foreground: #000000;
-    --sds-c-radio-color-background-checked: orange;
+    --slds-c-radio-mark-color-foreground: #000000;
+    --slds-c-radio-color-background-checked: orange;
 }
 ```
 

package/src/lightning/select/__docs__/select.md

@@ -238,11 +238,11 @@ Use the `variant` attribute with one of these values to position the labels diff
 
 To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute. For example, you can add padding on the top of the component using the `slds-p-top_medium` SLDS class.
 
-To apply custom styling, define a custom class using the `class` attribute. Use SLDS styling hooks to customize the component's styles. For example, specify the border color on the `select` element using the `--sds-c-select-color-border` custom property.
+To apply custom styling, define a custom class using the `class` attribute. Use SLDS styling hooks to customize the component's styles. For example, specify the border color on the `select` element using the `--slds-c-select-color-border` custom property.
 
 ```css
 .my-select {
-    --sds-c-select-color-border: red;
+    --slds-c-select-color-border: red;
 }
 ```
 

package/src/lightning/shadowBaseClassPrivate/shadowBaseClassPrivate.js

@@ -5,7 +5,7 @@ export default class LightningShadowBaseClass extends LightningElement {
 
     connectedCallback() {
         if (!this.template.synthetic) {
-            this.template.host.setAttribute('data-render-mode', 'shadow');
+            this.setAttribute('data-render-mode', 'shadow');
         }
     }
 }