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

package/src/lightning/radioGroup/input-radio-group.slds.css

@@ -205,7 +205,7 @@
 
     /* Radio Group: Spacing */
     --sds-c-inputradiogroup-legend-spacing-block-end: var(
-      --slds-c-inputradiogroup-legend-spacing-block-end,
+      --slds-c-inputradiogroup-legend-spacing-blockend,
       var(--sds-g-spacing-1, 0.25rem)
     );
     --sds-c-inputradiogroup-options-spacing-gap: var(
@@ -228,7 +228,7 @@
 
     /* Radio: Spacing */
     --sds-c-inputradio-label-spacing-inline-start: var(
-      --slds-c-inputradiogroup-label-spacing-inline-start,
+      --slds-c-inputradiogroup-label-spacing-inlinestart,
       var(--sds-g-spacing-2, 0.5rem)
     );
 
@@ -488,7 +488,6 @@
   display: flex;
   line-height: 1.875rem;
   text-decoration: none;
-  -webkit-appearance: none;
   white-space: normal;
   user-select: none;
 }
@@ -653,15 +652,15 @@
   * https://www.lightningdesignsystem.com/components/form-element/#Horizontal-Alignment
   */
 
-:host([data-render-mode="shadow"][variant~='label-inline']) [part='input-radio-group'] {
+:host([data-render-mode="shadow"][variant='label-inline']) [part='input-radio-group'] {
   display: block;
 }
 
-@media (min-width: 48em) {
+@media (width >= 48em) {
   /**
     * Handle label - default behavior
     */
-  :host([data-render-mode="shadow"][variant~='label-inline']) [part='legend'] {
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='legend'] {
     float: left;
     max-width: calc(33% - 1.25rem); /* Removing icon width for when the help-text icon is present */
     flex-basis: calc(33% - 1.25rem); /* Some form element controls are set to display:flex */
@@ -674,7 +673,7 @@
   /**
     * Handle control - default behavior
     */
-  :host([data-render-mode="shadow"][variant~='label-inline']) [part='options'] {
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='options'] {
     padding-inline-start: 33%;
     clear: none; /* Reset clear: left when switching to horizontal form layout */
   }
@@ -682,7 +681,7 @@
   /**
     * Since the HTML differs for radio groups, adjust the display behavior
     */
-  :host([data-render-mode="shadow"][variant~='label-inline']) ~ [part='input-radio'] [part='indicator'] {
+  :host([data-render-mode="shadow"][variant='label-inline']) ~ [part='input-radio'] [part='indicator'] {
     position: relative;
     float: none;
     max-width: 100%;
@@ -691,7 +690,7 @@
   }
 
   /* Position the inline help text correctly when in horizontal/compact layout */
-  :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+  :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
     margin-inline-start: 33%;
   }
 }
@@ -721,7 +720,7 @@
   * https://www.lightningdesignsystem.com/components/form-element/#Stacked-Alignment
   */
 
-:host([data-render-mode="shadow"][variant~='label-stacked']) [part='input-radio-group'] {
+:host([data-render-mode="shadow"][variant='label-stacked']) [part='input-radio-group'] {
   display: block;
 }
 
@@ -729,16 +728,16 @@
   * Make sure radio elements always stacked in fieldsets
   */
 
-:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-radio {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-radio {
   display: block; /* Override display: inline-block found on checkbox/radio */
 }
 
-:host([data-render-mode="shadow"][variant~='label-stacked']) [part='legend'],:host([data-render-mode="shadow"][variant~='label-stacked']) [part='options'] {
+:host([data-render-mode="shadow"][variant='label-stacked']) [part='legend'],:host([data-render-mode="shadow"][variant='label-stacked']) [part='options'] {
   border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
   padding-inline-start: 0;
 }
 
-:host([data-render-mode="shadow"][variant~='label-stacked']) [part='options'] {
+:host([data-render-mode="shadow"][variant='label-stacked']) [part='options'] {
   width: 100%;
   flex-basis: 100%;
   clear: left;

package/src/lightning/relativeDateTime/__docs__/relativeDateTime.md

@@ -69,7 +69,7 @@ Supported units of time include:
 -   months
 -   years
 
-To obtain the language and locale information in your org, use the `@salesforce/i18n` scoped module. For more information, see [Access Internationalization Properties](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_i18n).
+To obtain the language and locale information in your org, use the `@salesforce/i18n` scoped module. For more information, see [Access Internationalization Properties](https://developer.salesforce.com/docs/platform/lwc/guide/create-i18n).
 
 #### Usage Considerations
 

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

@@ -250,7 +250,7 @@ See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/se
 
 ## Usage Considerations
 
-`lightning-select` uses `delegatesFocus` to manage focus. `tabindex` is not supported. See [Handle Focus](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_components_focus) for more information.
+`lightning-select` uses `delegatesFocus` to manage focus. `tabindex` is not supported. See [Handle Focus](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-focus) for more information.
 
 Option groupings and disabled options are currently not supported.
 

package/src/lightning/select/form-element.slds.css

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }

package/src/lightning/select/select.slds.css

@@ -163,42 +163,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -207,7 +207,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -217,32 +217,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -252,23 +252,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -276,11 +275,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -313,7 +312,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }
@@ -330,7 +329,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       border-radius: var(--slds-c-select-radius-border, var(--sds-g-radius-border-2, 0.25rem));
       background-color: var(--slds-c-select-color-background,
       var(--sds-g-color-neutral-base-100, #ffffff));
-      color: var(--slds-c-select-text-color, currentColor, var(--sds-g-color-neutral-base-10, #181818));
+      color: var(--slds-c-select-text-color, currentcolor, var(--sds-g-color-neutral-base-10, #181818));
       box-shadow: var(--slds-c-select-shadow);
       transition: border 0.1s linear, background-color 0.1s linear;
     }
@@ -404,12 +403,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     :host([data-render-mode="shadow"]) .slds-select_container::before {
-      border-bottom: 5px solid currentColor;
+      border-bottom: 5px solid currentcolor;
       top: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
     }
 
     :host([data-render-mode="shadow"]) .slds-select_container::after {
-      border-top: 5px solid currentColor;
+      border-top: 5px solid currentcolor;
       bottom: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
     }
 

package/src/lightning/spinner/spinner.slds.css

@@ -18,10 +18,7 @@
 @supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) [part='backdrop'] {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     z-index: 9050;
     background-color: var(--slds-c-spinner-backdrop-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
     visibility: visible;
@@ -347,11 +344,11 @@
   }
 
   :host([data-render-mode="shadow"]) [part='spinner']::before {
-    animation-delay: -83.33333ms;
+    animation-delay: -83.3333ms;
   }
 
   :host([data-render-mode="shadow"]) [part='dot-a']::before {
-    animation-delay: 83.33333ms;
+    animation-delay: 83.3333ms;
   }
 
   :host([data-render-mode="shadow"]) [part='dot-b']::before {
@@ -359,11 +356,11 @@
   }
 
   :host([data-render-mode="shadow"]) [part='spinner']::after {
-    animation-delay: 416.66667ms;
+    animation-delay: 416.6667ms;
   }
 
   :host([data-render-mode="shadow"]) [part='dot-a']::after {
-    animation-delay: 583.33333ms;
+    animation-delay: 583.3333ms;
   }
 
   :host([data-render-mode="shadow"]) [part='dot-b']::after {

package/src/lightning/tab/__docs__/tab.md

@@ -35,7 +35,7 @@ For example, you want to display a tab conditionally.
 </lightning-tabset>
 ```
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Custom Events
 

package/src/lightning/tab/tab.slds.css

@@ -5,16 +5,16 @@
 
 
   :host([data-render-mode="shadow"].slds-tabs_default__content) {
-    --slds-c-tabs-panel-spacing-block-start: var(--slds-c-tab-panel-spacing-block-start);
-    --slds-c-tabs-panel-spacing-block-end: var(--slds-c-tab-panel-spacing-block-end);
-    --slds-c-tabs-panel-spacing-inline-end: var(--slds-c-tab-panel-spacing-inline-end);
-    --slds-c-tabs-panel-spacing-inline-start: var(--slds-c-tab-panel-spacing-inline-start);
+    --slds-c-tabs-panel-spacing-block-start: var(--slds-c-tab-panel-spacing-blockstart);
+    --slds-c-tabs-panel-spacing-block-end: var(--slds-c-tab-panel-spacing-blockend);
+    --slds-c-tabs-panel-spacing-inline-end: var(--slds-c-tab-panel-spacing-inlineend);
+    --slds-c-tabs-panel-spacing-inline-start: var(--slds-c-tab-panel-spacing-inlinestart);
 
     position: relative;
-    padding-block-start: var(--slds-c-tab-panel-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
-    padding-inline-end: var(--slds-c-tab-panel-spacing-inline-end, 0);
-    padding-block-end: var(--slds-c-tab-panel-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
-    padding-inline-start: var(--slds-c-tab-panel-spacing-inline-start, 0);
+    padding-block-start: var(--slds-c-tab-panel-spacing-blockstart, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-end: var(--slds-c-tab-panel-spacing-inlineend, 0);
+    padding-block-end: var(--slds-c-tab-panel-spacing-blockend, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-start: var(--slds-c-tab-panel-spacing-inlinestart, 0);
   }
 
   :host([data-render-mode="shadow"].slds-tabs_scoped__content) {