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

package/src/lightning/tabBar/tab-bar.slds.css

@@ -3,6 +3,14 @@
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
+  /* re-assign current slds hooks using deprecated naming conventions */
+  :host([data-render-mode="shadow"]) {
+    --slds-c-tabs-item-spacing-block-end: var(--slds-c-tabbar-standard-spacing-blockend);
+    --slds-c-tabs-item-spacing-block-start: var(--slds-c-tabbar-standard-spacing-blockstart);
+    --slds-c-tabs-item-spacing-inline-end: var(--slds-c-tabbar-standard-spacing-inlineend);
+    --slds-c-tabs-item-spacing-inline-start: var(--slds-c-tabbar-standard-spacing-inlinestart);
+  }
+
   /* SHARED TAB BAR STYLING */
 
   /* Host reassignments to composed tabs for parity with SLDS blueprint
@@ -16,12 +24,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --_slds-c-tabbar-vertical-sizing-width: 12rem;
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
 
-    /* Color */
-    --slds-c-tabs-item-color-border-active: var(--slds-c-tabbar-standard-color-border-active);
-    --slds-c-tabs-item-color-border-hover: var(--slds-c-tabbar-standard-color-border-hover);
-    --slds-c-tabs-item-text-color: var(--slds-c-tabbar-standard-text-color);
-    --slds-c-tabs-item-text-color-active: var(--slds-c-tabbar-standard-text-color-active);
-    --slds-c-tabs-list-color-border: var(--slds-c-tabbar-standard-color-border);
+     /* Color */
+     --slds-c-tabs-item-color-border-active: var(--slds-c-tabbar-standard-color-border-active);
+     --slds-c-tabs-item-color-border-hover: var(--slds-c-tabbar-standard-color-border-hover);
+     --slds-c-tabs-item-text-color: var(--slds-c-tabbar-standard-text-color);
+     --slds-c-tabs-item-text-color-active: var(--slds-c-tabbar-standard-text-color-active);
+     --slds-c-tabs-list-color-border: var(--slds-c-tabbar-standard-color-border);
 
     /* Sizing */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
@@ -29,12 +37,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     --slds-c-tabs-list-sizing-border: var(--slds-c-tabbar-standard-sizing-border);
 
-    /* Spacing */
-    --slds-c-tabs-item-spacing-block-end: var(--slds-c-tabbar-standard-spacing-block-end);
-    --slds-c-tabs-item-spacing-block-start: var(--slds-c-tabbar-standard-spacing-block-start);
-    --slds-c-tabs-item-spacing-inline-end: var(--slds-c-tabbar-standard-spacing-inline-end);
-    --slds-c-tabs-item-spacing-inline-start: var(--slds-c-tabbar-standard-spacing-inline-start);
-
     /* Text */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     --slds-c-tabs-item-line-height: var(--slds-c-tabbar-standard-font-lineheight, var(--_slds-c-tabbar-standard-font-lineheight));
@@ -57,7 +59,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   :host([data-render-mode="shadow"]) [role='tab'] {
     text-decoration: none;
     cursor: pointer;
-    color: currentColor;
+    color: currentcolor;
   }
 
   :host([data-render-mode="shadow"]) .slds-is-active [role='tab']:focus {
@@ -81,9 +83,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   :host([data-render-mode="shadow"]) [part~='tab-overflow'] {
     display: inline-flex;
 
-    /* Background Color */
-    --slds-c-buttonicon-color-background: transparent;
-
     /* Background Color */
     --slds-c-buttonicon-color-background: transparent;
     --slds-c-buttonicon-color-background-hover: transparent;
@@ -117,10 +116,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   :host([data-render-mode="shadow"][variant='standard']) [part~='tab-item'] {
     color: var(--slds-c-tabbar-standard-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    padding-block-start: var(--slds-c-tabbar-standard-spacing-block-start, var(--slds-c-tabbar-standard-spacing-block, 0));
-    padding-inline-start: var(--slds-c-tabbar-standard-spacing-inline-start, var(--slds-c-tabbar-standard-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
-    padding-inline-end: var(--slds-c-tabbar-standard-spacing-inline-end, var(--slds-c-tabbar-standard-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
-    padding-block-end: var(--slds-c-tabbar-standard-spacing-block-end, var(--slds-c-tabbar-standard-spacing-block, 0));
+    padding-block-start: var(--slds-c-tabbar-standard-spacing-blockstart, var(--slds-c-tabbar-standard-spacing-block, 0));
+    padding-inline-start: var(--slds-c-tabbar-standard-spacing-inlinestart, var(--slds-c-tabbar-standard-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
+    padding-inline-end: var(--slds-c-tabbar-standard-spacing-inlineend, var(--slds-c-tabbar-standard-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
+    padding-block-end: var(--slds-c-tabbar-standard-spacing-blockend, var(--slds-c-tabbar-standard-spacing-block, 0));
     margin-block-end: calc(var(--slds-c-tabbar-standard-sizing-border, var(--sds-g-sizing-border-1, 1px)) * -1);
   }
 
@@ -194,7 +193,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   :host([data-render-mode="shadow"][variant='scoped']) [part='tab-bar'] {
     background-color: var(--slds-c-tabbar-scoped-color-background, var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3)));
-    -webkit-box-align: start;
     border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-tabbar-scoped-color-border, var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-80, #c9c9c9)));
     border-end-end-radius: 0;
     border-end-start-radius: 0;
@@ -226,11 +224,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     height: var(--slds-c-tabbar-scoped-sizing-height, var(--_slds-c-tabbar-scoped-sizing-height));
     line-height: var(--slds-c-tabbar-scoped-sizing-height, var(--_slds-c-tabbar-scoped-sizing-height));
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    padding-block-start: var(--slds-c-tabbar-scoped-spacing-block-start, var(--slds-c-tabbar-scoped-spacing-block, 0));
-    padding-inline-start: var(--slds-c-tabbar-scoped-spacing-inline-start, var(--slds-c-tabbar-scoped-spacing-inline, var(--sds-g-spacing-4, 1rem)));
-    padding-inline-end: var(--slds-c-tabbar-scoped-spacing-inline-end, var(--slds-c-tabbar-scoped-spacing-inline, var(--sds-g-spacing-4, 1rem)));
-    padding-block-end: var(--slds-c-tabbar-scoped-spacing-block-end, var(--slds-c-tabbar-scoped-spacing-block, 0));
-    color: currentColor;
+    padding-block-start: var(--slds-c-tabbar-scoped-spacing-blockstart, var(--slds-c-tabbar-scoped-spacing-block, 0));
+    padding-inline-start: var(--slds-c-tabbar-scoped-spacing-inlinestart, var(--slds-c-tabbar-scoped-spacing-inline, var(--sds-g-spacing-4, 1rem)));
+    padding-inline-end: var(--slds-c-tabbar-scoped-spacing-inlineend, var(--slds-c-tabbar-scoped-spacing-inline, var(--sds-g-spacing-4, 1rem)));
+    padding-block-end: var(--slds-c-tabbar-scoped-spacing-blockend, var(--slds-c-tabbar-scoped-spacing-block, 0));
+    color: currentcolor;
     background-clip: padding-box;
     border: 0;
     border-inline-start: var(--sds-g-sizing-border-1, 1px) solid transparent;
@@ -291,7 +289,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     align-items: center;
     overflow: hidden;
     border-block-end: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-tabbar-vertical-color-border, var(--slds-g-color-border-base-1, var(--sds-g-color-neutral-base-90, #e5e5e5)));
-    color: var(--slds-c-tabbar-vertical-text-color, currentColor);
+    color: var(--slds-c-tabbar-vertical-text-color, currentcolor);
   }
 
   :host([data-render-mode="shadow"][variant='vertical']) [part='tab-item']:last-child {
@@ -312,13 +310,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     flex: 1 1 0%;
     align-items: center;
     min-width: 0;
-    padding-block-start: var(--slds-c-tabbar-vertical-spacing-block-start, var(--slds-c-tabbar-vertical-spacing-block, var(--sds-g-spacing-3, 0.75rem)));
-    padding-inline-start: var(--slds-c-tabbar-vertical-spacing-inline-start, var(--slds-c-tabbar-vertical-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
-    padding-inline-end: var(--slds-c-tabbar-vertical-spacing-inline-end, var(--slds-c-tabbar-vertical-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
-    padding-block-end: var(--slds-c-tabbar-vertical-spacing-block-end, var(--slds-c-tabbar-vertical-spacing-block, var(--sds-g-spacing-3, 0.75rem)));
-    color: currentColor;
-    -webkit-box-flex: 1;
-    -webkit-box-align: center;
+    padding-block-start: var(--slds-c-tabbar-vertical-spacing-blockstart, var(--slds-c-tabbar-vertical-spacing-block, var(--sds-g-spacing-3, 0.75rem)));
+    padding-inline-start: var(--slds-c-tabbar-vertical-spacing-inlinestart, var(--slds-c-tabbar-vertical-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
+    padding-inline-end: var(--slds-c-tabbar-vertical-spacing-inlineend, var(--slds-c-tabbar-vertical-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
+    padding-block-end: var(--slds-c-tabbar-vertical-spacing-blockend, var(--slds-c-tabbar-vertical-spacing-block, var(--sds-g-spacing-3, 0.75rem)));
+    color: currentcolor;
   }
 
   :host([data-render-mode="shadow"][variant='vertical']) [role='tab']:hover {
@@ -329,6 +325,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* Active tab should still use active colors on hover */
   :host([data-render-mode="shadow"][variant='vertical']) .slds-is-active [role='tab']:hover {
     background: var(--slds-c-tabbar-vertical-color-background-active, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
-    color: currentColor;
+    color: currentcolor;
   }
 }

package/src/lightning/tabset/__docs__/tabset.md

@@ -141,7 +141,7 @@ Specify the text color using the `--slds-c-tabs-scoped-color-text-active` custom
 }
 ```
 
-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-tabset`, see the **Source Code** section.
 
@@ -155,7 +155,7 @@ You can nest `lightning-tab` within other elements such as `<div>` or `<template
 Tab content is lazy loaded, and as such only the active and previously
 active tabs content is queryable. In the example, the text `Content of Tab Two` is inserted in the DOM of the page only when the second tab is selected.
 
-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.
 
 #### Source Code
 

package/src/lightning/textarea/textarea.css

@@ -1,3 +1,4 @@
-:host {
+:host,
+textarea {
     display: block;
 }

package/src/lightning/textarea/textarea.html

@@ -1,5 +1,5 @@
 <template>
-    <label class={computedLabelClass} for="input">
+    <label class={computedLabelClass} for="input"  id="textarea-label" data-form-label>
         <template if:true={required}>
             <abbr class="slds-required" title={i18n.required}>*</abbr>
         </template>

package/src/lightning/textarea/textarea.js

@@ -438,8 +438,11 @@ export default class LightningTextarea extends LightningElement {
     }
 
     get computedUniqueHelpElementId() {
+        const label = this.template.querySelector('[data-form-label]');
         const helpMessage = this.template.querySelector('[data-help-message]');
-        let spaceSeperatedDescribedByIds = getRealDOMId(helpMessage);
+        let spaceSeperatedDescribedByIds = `${getRealDOMId(
+            label
+        )} ${getRealDOMId(helpMessage)}`;
         if (this.ariaDescribedBy && spaceSeperatedDescribedByIds) {
             spaceSeperatedDescribedByIds += ` ${this.ariaDescribedBy}`;
         } else if (this.ariaDescribedBy) {

package/src/lightning/tile/__docs__/tile.md

@@ -144,7 +144,7 @@ Use tiles when you are horizontally constrained for space. Tiles are appropriate
 
 Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences.
 
-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/timepicker/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/toast/button-icon.slds.css

@@ -165,7 +165,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
     --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentcolor);
 
     --sds-c-button-line-height: var(
       --slds-c-button-neutral-font-lineheight,
@@ -487,7 +487,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="left", when present
    */
-  :host([data-render-mode="shadow"]) [part~='start'] {
+  :host([data-render-mode="shadow"]) [part='start'] {
     display: inline-flex;
     padding-inline-end: 0;
   }
@@ -495,7 +495,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="right", when present
    */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     display: inline-flex;
     padding-inline-start: 0;
   }
@@ -572,7 +572,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-background-active: var(
       --slds-c-buttonicon-color-background-active,
-      var(--slds-c-button-neutral-color-background-focus)
+      transparent
     );
 
     /* Spacing */
@@ -600,7 +600,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-border-active: var(
       --slds-c-buttonicon-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
+      var(--slds-c-buttonicon-color-border-focus)
     );
 
     /* Shadow */
@@ -890,7 +890,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * End part
       */
   :host([data-render-mode="shadow"]) [part='end'] {
-    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
+    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inlinestart, 0);
   }
 
   /**

package/src/lightning/toast/formatted-rich-text.slds.css

@@ -3,8 +3,6 @@
   line-height: var(--sds-g-font-lineheight, 1.5);
   overflow-wrap: break-word;
   word-wrap: break-word;
-  -webkit-hyphens: manual;
-  -ms-hyphens: manual;
   hyphens: manual;
 }
 

package/src/lightning/toast/icon.slds.css

@@ -48,39 +48,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);
   }
 
@@ -90,15 +90,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
@@ -194,7 +194,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {