lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/interactiveDialogBase/interactiveDialogBase.css

@@ -1,520 +1,2 @@
-/* Required for autofocus to work correctly:
-   - child elements of modal appear 'visibility: hidden' at
-     the moment that they are being reviewed for eligibility
-     for focus in focus.js at isElementVisible()
-*/
-.fix-slds-modal {
-    visibility: visible;
-    z-index: unset;
-}
-
-/* Required for z-index */
-.fix-slds-backdrop {
-    z-index: unset;
-}
-
-
-/* Modal */
-.slds-modal {
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
-    transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
-    transition: transform 0.1s linear, opacity 0.1s linear;
-    transition: transform 0.1s linear, opacity 0.1s linear,
-        -webkit-transform 0.1s linear;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 9001;
-}
-
-/* Container */
-.slds-modal__container {
-    position: relative;
-    transform: translate(0, 0);
-    transform: translate(0, 0);
-    transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
-    transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
-    transition: transform 0.1s linear, opacity 0.1s linear;
-    transition: transform 0.1s linear, opacity 0.1s linear,
-        -webkit-transform 0.1s linear;
-    display: -webkit-box;
-    display: flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    flex-direction: column;
-    flex-direction: column;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    margin: 0 2rem;
-    height: 100%;
-    padding: 3rem 0 5rem;
-    border-radius: 0.25rem;
-}
-@media (min-width: 48em) {
-    .slds-modal__container {
-        margin: 0 auto;
-        width: 50%;
-        max-width: 40rem;
-        min-width: 20rem;
-    }
-}
-
-/* p-around_medium */
-.slds-p-around_medium,
-.slds-p-around--medium {
-    padding: 1rem;
-}
-
-/* Header/Footer */
-.slds-modal__header,
-.slds-modal__footer {
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-}
-
-/* Header */
-.slds-modal__header {
-    position: relative;
-    border-top-right-radius: var(--sds-c-modal-radius-border, 0.25rem);
-    border-top-left-radius: var(--sds-c-modal-radius-border, 0.25rem);
-    border-bottom-width: var(--sds-c-modal-sizing-border, 2px);
-    border-bottom-style: solid;
-    border-bottom-color: var(--sds-c-modal-color-border, #e5e5e5);
-    background-color: var(
-        --sds-c-modal-header-color-background,
-        var(--sds-c-modal-color-background, white)
-    );
-    color: var(--sds-c-modal-header-text-color, var(--sds-c-modal-text-color));
-    padding-top: var(--sds-c-modal-header-spacing-block-start, 1rem);
-    padding-right: var(--sds-c-modal-header-spacing-inline-end, 1rem);
-    padding-bottom: var(--sds-c-modal-header-spacing-block-end, 1rem);
-    padding-left: var(--sds-c-modal-header-spacing-inline-start, 1rem);
-    text-align: center;
-}
-
-.slds-modal__content_headless {
-  border-top-right-radius:var(--slds-c-modal-radius-border, var(--sds-c-modal-radius-border, 0.25rem));
-  border-top-left-radius:var(--slds-c-modal-radius-border, var(--sds-c-modal-radius-border, 0.25rem));
-}
-
-/* Content */
-.slds-modal__content {
-    background-color: var(
-        --sds-c-modal-content-color-background,
-        var(--sds-c-modal-color-background, white)
-    );
-    color: var(--sds-c-modal-content-text-color, var(--sds-c-modal-text-color));
-    overflow: hidden;
-    overflow-y: auto;
-}
-
-/* Footer */
-.slds-modal__footer {
-    border-bottom-right-radius: var(--sds-c-modal-radius-border, 0.25rem);
-    border-bottom-left-radius: var(--sds-c-modal-radius-border, 0.25rem);
-    border-top-width: var(--sds-c-modal-sizing-border, 2px);
-    border-top-style: solid;
-    border-top-color: var(--sds-c-modal-color-border, #e5e5e5);
-    background-color: var(
-        --sds-c-modal-footer-color-background,
-        var(--sds-c-modal-color-background, #f3f2f3)
-    );
-    color: var(--sds-c-modal-footer-text-color, var(--sds-c-modal-text-color));
-    padding-top: var(--sds-c-modal-footer-spacing-block-start, 0.75rem);
-    padding-right: var(--sds-c-modal-footer-spacing-inline-end, 1rem);
-    padding-bottom: var(--sds-c-modal-footer-spacing-block-end, 0.75rem);
-    padding-left: var(--sds-c-modal-footer-spacing-inline-start, 1rem);
-    text-align: right;
-    box-shadow: var(
-        --sds-c-modal-shadow,
-        0 2px 3px 0 rgb(0 0 0 / 16%)
-    );
-    box-shadow: var(--sds-c-modal-shadow, 0 2px 3px 0 rgb(0 0 0 / 16%));
-}
-
-.slds-modal__footer_directional .slds-button:first-child,
-.slds-modal__footer--directional .slds-button:first-child {
-    float: left;
-}
-
-.slds-modal__footer .slds-button + .slds-button {
-    margin-left: 0.5rem;
-}
-
-/* Default Theme (for footer) */
-.slds-theme_default,
-.slds-theme--default {
-    background-color: white;
-    color: #080707;
-}
-
-/* Modal Size */
-@media (min-width: 48em) {
-    .slds-modal_small .slds-modal__container {
-        width: 60%;
-        max-width: 52.0625rem;
-        min-width: 40rem;
-    }
-}
-@media (min-width: 48em) {
-    .slds-modal_medium .slds-modal__container {
-        width: 70%;
-        max-width: 75rem;
-        min-width: 40rem;
-    }
-}
-@media (min-width: 48em) {
-    .slds-modal_large .slds-modal__container,
-    .slds-modal--large .slds-modal__container {
-        width: 90%;
-        max-width: none;
-        min-width: 40rem;
-    }
-}
-
-/* Backdrop */
-.slds-backdrop {
-    transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    visibility: hidden;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: var(--sds-c-backdrop-color-background, rgb(8 7 7 / 60%));
-    z-index: 9000;
-}
-
-.slds-backdrop_open,
-.slds-backdrop--open {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.4s linear;
-    transition: opacity 0.4s linear;
-}
-
-/* Fade-in Animation Styling */
-.slds-fade-in-open {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.1s linear;
-    transition: opacity 0.1s linear;
-}
-
-.slds-fade-in-open .slds-modal__container-reset {
-    opacity: 1;
-    visibility: visible;
-    transform: translate(0, 0);
-    transform: translate(0, 0);
-}
-
-/* Prompt */
-.slds-modal_prompt .slds-modal__close,
-.slds-modal--prompt .slds-modal__close {
-    display: none;
-}
-
-.slds-modal_prompt .slds-modal__header,
-.slds-modal--prompt .slds-modal__header {
-    border-bottom: 0;
-}
-
-.slds-modal_prompt .slds-modal__content,
-.slds-modal--prompt .slds-modal__content {
-    padding-left: 2rem;
-    padding-right: 2rem;
-}
-
-.slds-modal_prompt .slds-modal__footer,
-.slds-modal--prompt .slds-modal__footer {
-    border-top: 0;
-    text-align: center;
-}
-
-/* Button */
-.slds-button {
-    position: relative;
-    display: inline-box;
-    display: inline-flexbox;
-    display: inline-flex;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    padding-top: var(--sds-c-button-spacing-block-start, 0);
-    padding-right: var(--sds-c-button-spacing-inline-end, 0);
-    padding-bottom: var(--sds-c-button-spacing-block-end, 0);
-    padding-left: var(--sds-c-button-spacing-inline-start, 0);
-    background: none;
-    background-color: var(--sds-c-button-color-background, transparent);
-    background-clip: border-box;
-    border-color: var(--sds-c-button-color-border, transparent);
-    border-style: solid;
-    border-width: var(--sds-c-button-sizing-border, 1px);
-    border-radius: var(--sds-c-button-radius-border, 0.25rem);
-    box-shadow: var(--sds-c-button-shadow);
-    box-shadow: var(--sds-c-button-shadow);
-    line-height: var(--sds-c-button-line-height, 1.875rem);
-    text-decoration: none;
-    color: var(--sds-c-button-text-color, #0176d3);
-    appearance: none;
-    white-space: normal;
-    user-select: none;
-    user-select: none;
-    user-select: none;
-    user-select: none;
-}
-
-.slds-button:hover,
-.slds-button:focus,
-.slds-button:active,
-.slds-button:visited {
-    text-decoration: none;
-}
-
-.slds-button:hover,
-.slds-button:focus {
-    color: var(--sds-c-button-text-color-hover, #014486);
-}
-
-.slds-button:focus {
-    outline: 0;
-    box-shadow: var(--sds-c-button-shadow-focus, 0 0 3px #0176d3);
-    box-shadow: var(--sds-c-button-shadow-focus, 0 0 3px #0176d3);
-}
-
-.slds-button:active {
-    color: var(--sds-c-button-text-color-active, #014486);
-    background-color:var(--slds-c-button-color-background-active);
-    border-color:var(--slds-c-button-color-border-active);
-}
-
-/* Neutral Button */
-.slds-button_neutral,
-.slds-button--neutral {
-    padding-left: var(--sds-c-button-neutral-spacing-inline-start, 1rem);
-    padding-right: var(--sds-c-button-neutral-spacing-inline-end, 1rem);
-    text-align: center;
-    vertical-align: middle;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    transition: border 0.15s linear;
-    transition: border 0.15s linear;
-    background-color: var(--sds-c-button-neutral-color-background, white);
-    border-color: var(--sds-c-button-neutral-color-border, #c9c9c9);
-}
-
-.slds-button_neutral:hover,
-.slds-button_neutral:focus,
-.slds-button--neutral:hover,
-.slds-button--neutral:focus {
-    background-color: var(
-        --sds-c-button-neutral-color-background-hover,
-        #f3f3f3
-    );
-    border-color: var(--sds-c-button-neutral-color-border-hover, #c9c9c9);
-}
-
-.slds-button_neutral:active,
-.slds-button--neutral:active {
-    background-color: var(
-        --sds-c-button-neutral-color-background-active,
-        #f3f2f3
-    );
-    border-color: var(--sds-c-button-neutral-color-border-active, #c9c9c9);
-}
-
-/* Brand Button */
-.slds-button_brand,
-.slds-button--brand {
-    padding-left: var(--sds-c-button-brand-spacing-inline-start, 1rem);
-    padding-right: var(--sds-c-button-brand-spacing-inline-end, 1rem);
-    text-align: center;
-    vertical-align: middle;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    transition: border 0.15s linear;
-    transition: border 0.15s linear;
-    background-color: var(--sds-c-button-brand-color-background, #0176d3);
-    border-color: var(--sds-c-button-brand-color-border, #0176d3);
-    color: var(--sds-c-button-brand-text-color, white);
-}
-
-.slds-button_brand:hover,
-.slds-button_brand:focus,
-.slds-button--brand:hover,
-.slds-button--brand:focus {
-    background-color: var(--sds-c-button-brand-color-background-hover, #014486);
-    border-color: var(--sds-c-button-brand-color-border-hover, #014486);
-    color: var(--sds-c-button-brand-text-color-hover, white);
-}
-
-.slds-button_brand:active,
-.slds-button--brand:active {
-    background-color: var(
-        --sds-c-button-brand-color-background-active,
-        #014486
-    );
-    border-color: var(--sds-c-button-brand-color-border-active, #014486);
-    color: var(--sds-c-button-brand-text-color-active, white);
-}
-
-/* Recreate Font Styling */
-
-.slds-modal_prompt {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol';
-    text-size-adjust: 100%;
-    text-size-adjust: 100%;
-    font-size: 0.8125rem;
-    line-height: 1.5;
-
-    /* background:#eef4ff; */
-    color: #080707;
-    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-}
-
-button {
-    color: inherit;
-    font: inherit;
-    margin: 0;
-    overflow: visible;
-    text-transform: none;
-    appearance: button;
-    cursor: pointer;
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-button,
-html input[type='button'],
-input[type='reset'],
-input[type='submit'] {
-    appearance: button;
-    cursor: pointer;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-/* Themes */
-.slds-theme_default,
-.slds-theme--default {
-    background-color: white;
-    color: #080707;
-}
-
-.slds-theme_shade,
-.slds-theme--shade {
-    background-color: #f3f2f2;
-}
-
-.slds-theme_inverse,
-.slds-theme--inverse {
-    color: white;
-    background-color: #001639;
-    border-color: #001639;
-}
-
-.slds-theme_alt-inverse,
-.slds-theme--alt-inverse {
-    color: white;
-    background-color: #032d60;
-    border-color: #032d60;
-}
-
-.slds-theme_success,
-.slds-theme--success {
-    color: white;
-    background-color: #2e844a;
-}
-
-.slds-theme_info,
-.slds-theme--info {
-    color: white;
-    background-color: #706e6b;
-}
-
-.slds-theme_warning,
-.slds-theme--warning {
-    background-color: #fe9339;
-    color: #080707;
-}
-
-.slds-theme_error,
-.slds-theme--error {
-    color: white;
-    background-color: #ea001e;
-}
-
-.slds-theme_offline,
-.slds-theme--offline {
-    color: white;
-    background-color: #444;
-}
-
-.slds-theme_alert-texture,
-.slds-theme--alert-texture {
-    background-image: linear-gradient(
-        45deg,
-        rgb(0 0 0 / 2.5%) 25%,
-        transparent 25%,
-        transparent 50%,
-        rgb(0 0 0 / 2.5%) 50%,
-        rgb(0 0 0 / 2.5%) 75%,
-        transparent 75%,
-        transparent
-    );
-    background-size: 64px 64px;
-}
-
-/* Heading Text */
-.slds-text-heading_medium,
-.slds-text-heading--medium {
-    font-size: 1.25rem;
-    line-height: 1.25;
-}
-
-h2 {
-    margin: 0;
-    padding: 0;
-    font-weight: inherit;
-    font-size: 1em;
-    orphans: 3;
-    widows: 3;
-    page-break-after: void;
-}
-
-/* Assistive Text */
-.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;
-}
+@import './interactiveDialogBase.lbc.synthetic.css';
+@import './interactiveDialogBase.lbc.native.css';

package/src/lightning/interactiveDialogBase/interactiveDialogBase.html

@@ -1,6 +1,7 @@
 <template>
     <div
         class={modalBackdropCssClasses}
+        part="modal-backdrop"
         role="presentation"
         data-backdrop
     ></div>
@@ -10,6 +11,7 @@
             tabindex="-1"
             aria-modal="true"
             class={computedModalCssClasses}
+            part="modal"
             aria-label={ariaLabel}
             onkeydown={handleModalKeyDown}
             onprivateclose={handlePrivateClose}
@@ -25,9 +27,9 @@
             </template>
             <div class="slds-modal__container">
                 <template if:true={showHeader}>
-                    <div class={computedModalHeaderCssClasses}>
+                    <div class={computedModalHeaderCssClasses} part="modal-header">
                         <h1
-                            class="slds-text-heading_medium"
+                            class="slds-modal__title slds-hyphenate"
                             id="prompt-heading-id"
                             data-modal-heading
                         >{label}</h1>
@@ -35,13 +37,15 @@
                 </template>
                 <div
                     class={computedModalContentCssClasses}
+                    part="modal-body"
                     data-slot
                     lwc:dom="manual"
                 >
                 </div>
-                <div class="slds-modal__footer slds-theme_default">
+                <div class="slds-modal__footer slds-theme_default" part="modal-footer">
                     <template if:false={hideCancel}>
                         <button
+                            part="button"
                             class="slds-button slds-button_neutral"
                             onclick={handleCloseClick}
                             data-cancel-button
@@ -50,6 +54,7 @@
                         </button>
                     </template>
                     <button
+                        part="button"
                         class="slds-button slds-button_brand"
                         onclick={handleOkClick}
                         data-ok-button

package/src/lightning/interactiveDialogBase/interactiveDialogBase.js

@@ -180,6 +180,12 @@ export default class LightningModal extends LightningModalBase {
         }
     }
 
+    connectedCallback() {
+        super.connectedCallback();
+        // used to set theme styles in synthetic shadow
+        this.setAttribute('data-interactive-dialog', true);
+    }
+
     /**
      * Opens modal on initial render, sets aria attributes
      * and focuses element on second render

package/src/lightning/interactiveDialogBase/interactiveDialogBase.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './interactive-dialog-base.slds.css';
+@import 'lightning/sldsUtilsThemes';

package/src/lightning/interactiveDialogBase/interactiveDialogBase.lbc.synthetic.css

@@ -0,0 +1,20 @@
+/* Required for autofocus to work correctly:
+   - child elements of modal appear 'visibility: hidden' at
+     the moment that they are being reviewed for eligibility
+     for focus in focus.js at isElementVisible()
+*/
+.fix-slds-modal {
+    visibility: visible;
+    z-index: unset;
+}
+
+/* Required for z-index */
+.fix-slds-backdrop {
+    z-index: unset;
+}
+
+/* Recreate Font Styling in Lightning Out */
+.slds-modal_prompt {
+    font-size: 0.8125rem;
+    line-height: 1.5;
+}

package/src/lightning/internationalizationLibrary/datetime/dateTimeUtils.js

@@ -1,7 +1,7 @@
 // TODO: When migrating off Aura, consider removing 'asserts'; consider
 // consider using console.error, throwing Error and/or sticking with
 // default behavior for handling invalid inputs in i18nService
-import { assert } from 'lightning/utilsPrivate';
+import { assert, isCSR } from 'lightning/utilsPrivate';
 import locale from '@salesforce/i18n/locale';
 import shortDateFormat from '@salesforce/i18n/dateTime.shortDateFormat';
 import mediumDateFormat from '@salesforce/i18n/dateTime.mediumDateFormat';
@@ -328,10 +328,17 @@ export function normalizeISODate(value, dateStyle) {
 
     let parsedDate, displayValue;
     if (isoValue) {
-        assert(
-            isValidISODateTimeString(isoValue),
-            getDateTimeErrorMessage(value)
-        );
+        const isValid = isValidISODateTimeString(isoValue);
+        if (isCSR) {
+            assert(isValid, getDateTimeErrorMessage(value));
+        } else if (!isValid) {
+            // If SSR, do not throw to ensure hydration completes.
+            return {
+                isoValue: null,
+                displayValue: '',
+            };
+        }
+
         try {
             if (isAuraL10NAvailable) {
                 parsedDate = parseDateTime(isoValue, STANDARD_DATE_FORMAT);
@@ -377,7 +384,17 @@ export function normalizeISOTime(value, timeStyle) {
 
     let parsedValue, displayValue, getISO;
     if (timeValue) {
-        assert(isValidISOTimeString(timeValue), getDateTimeErrorMessage(value));
+        const isValid = isValidISOTimeString(timeValue);
+        if (isCSR) {
+            assert(isValid, getDateTimeErrorMessage(value));
+        } else if (!isValid) {
+            // If SSR, do not throw to ensure hydration completes.
+            return {
+                isoValue: null,
+                parsedValue: null,
+                displayValue: '',
+            };
+        }
         try {
             if (isAuraL10NAvailable) {
                 parsedValue = parseTime(timeValue);
@@ -427,10 +444,16 @@ export function normalizeISODateTime(value, timeZone) {
 
     let parsedDate, displayValue;
     if (dateTimeValue) {
-        assert(
-            isValidISODateTimeString(dateTimeValue),
-            getDateTimeErrorMessage(value)
-        );
+        const isValid = isValidISODateTimeString(dateTimeValue);
+        if (isCSR) {
+            assert(isValid, getDateTimeErrorMessage(value));
+        } else if (!isValid) {
+            // If SSR, do not throw to ensure hydration completes.
+            return {
+                isoValue: null,
+                displayValue: '',
+            };
+        }
         try {
             if (isAuraL10NAvailable) {
                 const utcDate = parseDateTimeISO8601(dateTimeValue);

package/src/lightning/layout/layout.css

@@ -1,9 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import 'lightning/sldsUtilsGrid'; */
-
-@media all and (-ms-high-contrast: none),
-(-ms-high-contrast: active) {
-    .slds-slot {
-        display: flex;
-    }
-}
+@import './layout.lbc.synthetic.css';
+@import './layout.lbc.native.css';