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

package/src/lightning/buttonStateful/button-stateful.slds.css

@@ -205,7 +205,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,
@@ -527,7 +527,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;
   }
@@ -535,7 +535,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;
   }
@@ -582,39 +582,39 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 
 @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);
   }
 
@@ -624,15 +624,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --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
@@ -728,7 +728,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
@@ -751,10 +751,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-text-color: var(--slds-c-buttonstateful-text-color);
     --slds-c-button-neutral-text-color-hover: var(--slds-c-buttonstateful-text-color-hover);
     --slds-c-button-neutral-text-color-focus: var(--slds-c-buttonstateful-text-color-focus);
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-buttonstateful-text-color-active,
-      var(--slds-c-button-neutral-text-color-hover)
-    );
+    --slds-c-button-neutral-text-color-active: var(--slds-c-buttonstateful-text-color-active);
 
     /* button background */
     --slds-c-button-neutral-color-background: var(--slds-c-buttonstateful-color-background);
@@ -774,7 +771,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-border-focus: var(
       --slds-c-buttonstateful-color-border-focus,
-      var(--slds-c-buttonstateful-color-border-hover, var(--slds-c-button-neutral-color-border-hover))
+      var(--slds-c-buttonstateful-color-border-hover, var(--slds-c-buttonstateful-color-border-hover))
     );
 
     /* button box shadow on focus */

package/src/lightning/calendar/calendar.slds.css

@@ -210,7 +210,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,
@@ -532,7 +532,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;
   }
@@ -540,7 +540,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;
   }
@@ -617,7 +617,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 */
@@ -645,7 +645,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 */
@@ -935,7 +935,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);
   }
 
   /**
@@ -982,7 +982,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1006,15 +1006,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"])  
+.slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
-    width: var(--sds-g-spacing-4, 1rem); 
+    width: var(--sds-g-spacing-4, 1rem);
     height: var(--sds-g-spacing-4, 1rem);
     position: absolute;
     transform: rotate(45deg);
@@ -1032,7 +1032,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1053,7 +1053,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1079,7 +1079,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1095,19 +1095,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     background-color: inherit;
 
     /* Position: Bottom */
-    bottom: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    left: auto;
-    right: var(--sds-g-spacing-5, 1.5rem);
-    top: 100%;
+    inset: 100% auto calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1) var(--sds-g-spacing-5, 1.5rem);
     margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
     margin-right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
+    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
     z-index: -1;
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
   }
 
@@ -1128,7 +1125,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1152,7 +1149,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1182,7 +1179,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
-    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1203,7 +1200,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1227,7 +1224,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1257,7 +1254,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
-    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1351,15 +1348,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-overlay-radius-border: var(--slds-c-dropdown-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-overlay-sizing-border: var(--slds-c-dropdown-sizing-border, var(--sds-g-sizing-border-1, 1px));
     --sds-c-overlay-color-border: var(--slds-c-dropdown-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 0.16));
+    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
     --sds-c-overlay-spacing-inline-start: 0;
     --sds-c-overlay-spacing-inline-end: 0;
     --sds-c-overlay-spacing-block-start: var(
-      --slds-c-dropdown-spacing-block-start,
+      --slds-c-dropdown-spacing-blockstart,
       var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
     );
     --sds-c-overlay-spacing-block-end: var(
-      --slds-c-dropdown-spacing-block-end,
+      --slds-c-dropdown-spacing-blockend,
       var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
     );
 
@@ -1373,11 +1370,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     /* stylelint-disable */
     margin-block-start: calc(
-      var(--slds-c-dropdown-spacing-block-start, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+      var(--slds-c-dropdown-spacing-blockstart, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
         2
     );
     margin-block-end: calc(
-      var(--slds-c-dropdown-spacing-block-end, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+      var(--slds-c-dropdown-spacing-blockend, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
         2
     );
     /* stylelint-enable */
@@ -1417,7 +1414,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     top: 100%;
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"])  
+  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger .slds-dropdown_bottom {
     top: auto;
   }
@@ -1545,7 +1542,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 5
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1556,7 +1552,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 7
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1567,7 +1562,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 10
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1575,7 +1569,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 5);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1583,7 +1576,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 7);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1591,7 +1583,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 10);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1696,7 +1687,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;
     }
@@ -1770,12 +1761,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);
     }
 
@@ -1834,7 +1825,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     optgroup,:host([data-render-mode="shadow"]) 
     textarea {
         color: inherit;
-        font: inherit; 
+        font: inherit;
         margin: 0;
     }
 
@@ -1873,11 +1864,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     /* Indicates today */
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:hover > .slds-day,:host([data-render-mode="shadow"])  
-    [part~="calendar"] tbody > tr > td:focus > .slds-day,:host([data-render-mode="shadow"])  
+    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:hover > .slds-day,:host([data-render-mode="shadow"]) 
+    [part~="calendar"] tbody > tr > td:focus > .slds-day,:host([data-render-mode="shadow"]) 
     [part~="calendar"] tbody > tr > td.slds-is-today > .slds-day {
         cursor: pointer;
-    } 
+    }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-today > .slds-day {
         background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
@@ -1922,7 +1913,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     :host([data-render-mode="shadow"]) .slds-datepicker__month {
         font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
       }
-      
+
     :host([data-render-mode="shadow"]) .slds-has-error .slds-datepicker__filter .slds-select {
     border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-border-base-1, #c9c9c9);
     box-shadow: none;
@@ -1946,7 +1937,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         align-items: center;
         padding-block: 0;
         padding-inline: 0;
-        background: none; 
+        background: none;
         background-color: transparent;
         background-clip: border-box;
         border-color: transparent;
@@ -1999,7 +1990,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     .slds-button:active .slds-button__icon,:host([data-render-mode="shadow"]) 
     .slds-button[disabled] .slds-button__icon,:host([data-render-mode="shadow"]) 
     .slds-button:disabled .slds-button__icon {
-        fill: currentColor;
+        fill: currentcolor;
         pointer-events: none;
     }
 
@@ -2016,7 +2007,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         text-decoration: none;
         transition: color 0.1s linear;
     }
-    
+
     :host([data-render-mode="shadow"]) .slds-text-link:hover,:host([data-render-mode="shadow"]) 
     .slds-text-link:focus {
         text-decoration: underline;

package/src/lightning/card/__docs__/card.md

@@ -38,7 +38,7 @@ Here's an example that passes in the title, actions, and footer as slots, and in
 
 `title` is available as an attribute or a slot. Pass in the title as a slot if you want to pass in markup, such as making the title bold.
 
-Use the `title` attribute if your title doesn't need extra formatting. Setting the `title` attribute overwrites the `title` slot. For more information, see [Use Slots as Placeholders](docs/component-library/documentation/lwc/lwc.create_components_slots).
+Use the `title` attribute if your title doesn't need extra formatting. Setting the `title` attribute overwrites the `title` slot. For more information, see [Use Slots as Placeholders](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-slots).
 
 #### Add an Action to the Footer Slot
 
@@ -67,7 +67,7 @@ For a View All link, set the href value of the tag to a URL to take the user to
 </template>
 ```
 
-To navigate to records, list views, and objects in Lightning Experience, Experience Builder sites, and the Salesforce mobile app, use the navigation service, [`lightning/navigation`](docs/component-library/bundle/lightning-navigation). For more information, see [Basic Navigation](docs/component-library/documentation/en/lwc/lwc.use_navigate_basic).
+To navigate to records, list views, and objects in Lightning Experience, Experience Builder sites, and the Salesforce mobile app, use the navigation service, [`lightning/navigation`](docs/component-library/bundle/lightning-navigation). For more information, see [Basic Navigation](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate-basic).
 
 #### Component Styling
 
@@ -91,13 +91,13 @@ To apply custom styling, use the `:host` selector. Use SLDS styling hooks to cus
 ```css
 :host {
     --slds-c-card-heading-font-weight: 500px;
-    --slds-c-card-body-spacing-inline-start: 20px;
+    --slds-c-card-body-spacing-inlinestart: 20px;
 }
 ```
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/cards/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 `lightning-card` also includes [`lightning-icon`](bundle/lightning-icon/documentation) and [`lightning-button`](bundle/lightning-button/documentation) components that you can customize using SLDS styling hooks.
 
@@ -107,7 +107,7 @@ To understand how we implemented SLDS in `lightning-card`, see the **Source Code
 
 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.
 
 #### Source Code
 

package/src/lightning/card/card.slds.css

@@ -50,20 +50,39 @@
 }
 
 @supports (--styling-hooks: '') {
+      /* re-assign current slds hooks using deprecated naming conventions */
+      :host([data-render-mode="shadow"]) {
+        --slds-c-card-body-spacing-block-end: var(--slds-c-card-body-spacing-blockend);
+        --slds-c-card-body-spacing-block-start: var(--slds-c-card-body-spacing-blockstart);
+        --slds-c-card-body-spacing-inline-end: var(--slds-c-card-body-spacing-inlineend);
+        --slds-c-card-body-spacing-inline-start: var(--slds-c-card-body-spacing-inlinestart);
+        --slds-c-card-footer-spacing-block-end: var(--slds-c-card-footer-spacing-blockend);
+        --slds-c-card-footer-spacing-block-start: var(--slds-c-card-footer-spacing-blockstart);
+        --slds-c-card-footer-spacing-inline-end: var(--slds-c-card-footer-spacing-inlineend);
+        --slds-c-card-footer-spacing-inline-start: var(--slds-c-card-footer-spacing-inlinestart);
+        --slds-c-card-header-spacing-block-end: var(--slds-c-card-header-spacing-blockend);
+        --slds-c-card-header-spacing-block-start: var(--slds-c-card-header-spacing-blockstart);
+        --slds-c-card-header-spacing-inline-end: var(--slds-c-card-header-spacing-inlineend);
+        --slds-c-card-header-spacing-inline-start: var(--slds-c-card-header-spacing-inlinestart);
+        --slds-c-card-spacing-block-end: var(--slds-c-card-spacing-blockend);
+        --slds-c-card-spacing-block-start: var(--slds-c-card-spacing-blockstart);
+        --slds-c-card-spacing-inline-end: var(--slds-c-card-spacing-inlineend);
+        --slds-c-card-spacing-inline-start: var(--slds-c-card-spacing-inlinestart);
+      }
 
 	:host([data-render-mode="shadow"]) [part="card"] {
 		position: relative;
 		--sds-c-card-spacing-block-start:
-      var(--slds-c-card-spacing-block-start,
+      var(--slds-c-card-spacing-blockstart,
         var(--slds-c-card-spacing-block, 0));
 		--sds-c-card-spacing-block-end:
-      var(--slds-c-card-spacing-block-end,
+      var(--slds-c-card-spacing-blockend,
         var(--slds-c-card-spacing-block, 0));
 		--sds-c-card-spacing-inline-start:
-      var(--slds-c-card-spacing-inline-start,
+      var(--slds-c-card-spacing-inlinestart,
         var(--slds-c-card-spacing-inline, 0));
 		--sds-c-card-spacing-inline-end:
-      var(--slds-c-card-spacing-inline-end,
+      var(--slds-c-card-spacing-inlineend,
         var(--slds-c-card-spacing-inline, 0));
     --sds-c-card-color-background:
       var(--slds-c-card-color-background,
@@ -96,23 +115,23 @@
 
     /* Padding */
 		--sds-c-card-header-spacing-block-start:
-			var(--slds-c-card-header-spacing-block-start,
+			var(--slds-c-card-header-spacing-blockstart,
 				var(--slds-c-card-header-spacing-block,
           var(--sds-g-spacing-3, 0.75rem)));
 		--sds-c-card-header-spacing-block-end:
-			var(--slds-c-card-header-spacing-block-end,
+			var(--slds-c-card-header-spacing-blockend,
         var(--slds-c-card-header-spacing-block, 0));
 		--sds-c-card-header-spacing-inline-start:
-			var(--slds-c-card-header-spacing-inline-start,
+			var(--slds-c-card-header-spacing-inlinestart,
 				var(--slds-c-card-header-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
 		--sds-c-card-header-spacing-inline-end:
-			var(--slds-c-card-header-spacing-inline-end,
+			var(--slds-c-card-header-spacing-inlineend,
 				var(--slds-c-card-header-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
 
     /* Margin */
-    margin-block-end: var(--slds-c-card-header-spacing-block-end,
+    margin-block-end: var(--slds-c-card-header-spacing-blockend,
         var(--sds-g-spacing-3, 0.75rem));
 
     /**
@@ -172,16 +191,16 @@
 
   :host([data-render-mode="shadow"]) [part="body"] {
     --sds-c-card-body-spacing-block-start:
-      var(--slds-c-card-body-spacing-block-start,
+      var(--slds-c-card-body-spacing-blockstart,
         var(--slds-c-card-body-spacing-block));
     --sds-c-card-body-spacing-block-end:
-      var(--slds-c-card-body-spacing-block-end,
+      var(--slds-c-card-body-spacing-blockend,
         var(--slds-c-card-body-spacing-block));
     --sds-c-card-body-spacing-inline-start:
-      var(--slds-c-card-body-spacing-inline-start,
+      var(--slds-c-card-body-spacing-inlinestart,
         var(--slds-c-card-body-spacing-inline));
     --sds-c-card-body-spacing-inline-end:
-      var(--slds-c-card-body-spacing-inline-end,
+      var(--slds-c-card-body-spacing-inlineend,
         var(--slds-c-card-body-spacing-inline));
     --slds-c-card-color-border: transparent;
     --slds-c-card-shadow: none;
@@ -189,19 +208,19 @@
 
   :host([data-render-mode="shadow"]) [part='footer'] {
     --sds-c-card-footer-spacing-block-start:
-      var(--slds-c-card-footer-spacing-block-start,
+      var(--slds-c-card-footer-spacing-blockstart,
         var(--slds-c-card-footer-spacing-block,
           var(--sds-g-spacing-3, 0.75rem)));
     --sds-c-card-footer-spacing-block-end:
-      var(--slds-c-card-footer-spacing-block-end,
+      var(--slds-c-card-footer-spacing-blockend,
         var(--slds-c-card-footer-spacing-block,
           var(--sds-g-spacing-3, 0.75rem)));
     --sds-c-card-footer-spacing-inline-start:
-      var(--slds-c-card-footer-spacing-inline-start,
+      var(--slds-c-card-footer-spacing-inlinestart,
         var(--slds-c-card-footer-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
     --sds-c-card-footer-spacing-inline-end:
-      var(--slds-c-card-footer-spacing-inline-end,
+      var(--slds-c-card-footer-spacing-inlineend,
         var(--slds-c-card-footer-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
     --sds-c-card-footer-sizing-border:
@@ -226,7 +245,7 @@
   /* Note: Refactor the below. Utility classes that should be removed once utility implementation is completed. */
   :host([data-render-mode="shadow"]) .slds-media__figure {
     flex-shrink: 0;
-    margin-inline-end: var(--slds-c-card-icon-spacing-inline-end,
+    margin-inline-end: var(--slds-c-card-icon-spacing-inlineend,
       var(--sds-g-spacing-3, 0.75rem));
   }
 

package/src/lightning/colorPickerCustom/color-picker-custom.slds.css

@@ -241,8 +241,8 @@
 
 @supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) [part='color-picker-custom'] {
-    --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-1, 0.25rem);
-    --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-1, 0.25rem);
   }
 
   /* needed to change the size of the hex input */
@@ -263,7 +263,7 @@
     width: var(--sds-g-spacing-3, 0.75rem);
     border: var(--sds-g-sizing-border-2, 2px) solid var(--sds-g-color-neutral-base-100, #ffffff);
     border-radius: 50%;
-    box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 0.16), inset 0 2px 4px 4px rgba(0, 0, 0, 0.16);
+    box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 16%), inset 0 2px 4px 4px rgba(0, 0, 0, 16%);
   }
 
   :host([data-render-mode="shadow"]) .slds-color-picker__range-indicator:focus {