lightning-base-components 1.21.2-alpha → 1.21.3-alpha

package/src/lightning/baseComboboxItem/listbox.slds.css

@@ -1,89 +1,72 @@
 
- @supports (--styling-hooks: '') {
-   /* Horizontal listbox - used for pill container */
+  /* Horizontal listbox - used for pill container */
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
    }
-
-  :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
     display: flex;
   }
-
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
      padding-inline-start: 0.125rem;
    }
-
-  /* Vertical listbox */
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+   /* Vertical listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
   .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
   .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
     background-color: var(--slds-g-color-surface-container-2);
     text-decoration: none;
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
   .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
     background-color: transparent;
     cursor: default;
   }
-
-  /* Modifies the listbox option if it contains an entity object */
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
+   /* Modifies the listbox option if it contains an entity object */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
     padding-block: var(--slds-g-spacing-1);
     padding-inline: var(--slds-g-spacing-3);
   }
-
-  /* Modifies the listbox option if it contains a plain object or string */
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+   /* Modifies the listbox option if it contains a plain object or string */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
     padding-block: var(--slds-g-spacing-2);
     padding-inline: var(--slds-g-spacing-3);
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
     padding-block: var(--slds-g-spacing-2);
     padding-inline: var(--slds-g-spacing-3);
   }
-
-  /* Choosable option within listbox */
-  :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+   /* Choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
     cursor: pointer;
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+   :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
     outline: 0;
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
     color: var(--slds-g-color-disabled-2);
   }
-
-  /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
-
-  /* the _vertical variations only apply to combobox's */
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
+   /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
+   /* the _vertical variations only apply to combobox's */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
     margin-inline-end: var(--slds-g-spacing-2);
   }
-
-  /* If the listbox option has metadata or secondary information that sits below its primary text */
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
+   /* If the listbox option has metadata or secondary information that sits below its primary text */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
     margin-block-start: var(--slds-g-spacing-1);
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+   :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
     display: inline-block;
     vertical-align: middle;
   }
-
-  /* Header for choosable option within listbox */
-  :host([data-render-mode="shadow"]) .slds-listbox__option-header {
+   /* Header for choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-header {
     font-size: var(--slds-g-font-scale-neg-1);
     font-weight: 700;
   }
-
-  /* Container for listbox option icon */
-  :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+   /* Container for listbox option icon */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
     width: var(--slds-g-sizing-7);
     display: inline-flex;
     align-content: center;
@@ -91,26 +74,21 @@
     justify-content: center;
     color: var(--slds-g-color-accent-2);
   }
-
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
      color: currentcolor;
    }
-
-  /* The icon within a plain listbox that indicates if an option has been selected or not. */
-  :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
+   /* The icon within a plain listbox that indicates if an option has been selected or not. */
+   :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
     opacity: 0;
     fill: var(--slds-g-color-accent-2);
   }
-
-  /* Modifier that makes selected icon visible */
-  :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+   /* Modifier that makes selected icon visible */
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
     opacity: 1;
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
     color: var(--slds-g-color-accent-2);
   }
-
    /* The main text of an entity listbox */
    :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
      max-width: 100%;
@@ -120,24 +98,18 @@
      display: block;
      margin-block-end: 0.125rem;
    }
-
-  /* The metadata or secondary text of an entity listbox */
-  :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+   /* The metadata or secondary text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
     display: block;
     margin-block-start: calc(var(--slds-g-spacing-1) * -1);
     color: var(--slds-g-color-neutral-base-30);
   }
-
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
      color: currentcolor;
    }
-
    /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
-
-  /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
-
+   /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
    /* The container of pill selections found inside of a combobox group */
-
    /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
      position: relative;
@@ -146,97 +118,78 @@
      height: 1.875rem;
      overflow: hidden;
    }
-
-  /* Expanded state of a selection group */
-  :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+   /* Expanded state of a selection group */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
     height: auto;
     padding: 0;
   }
-
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
      padding-block-start: 0;
      padding-block-end: 0.125rem;
      padding-inline: 0;
    }
-
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
      padding-block-start: 0.125rem;
      padding-block-end: 0;
      padding-inline: 0.125rem;
    }
-
-  /* Toggle button to show all of the pill selections */
-  :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+   /* Toggle button to show all of the pill selections */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: var(--slds-g-spacing-2);
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
     line-height: 1;
   }
-
-  /* Media Object classes need to be pulled out for reusability */
-  :host([data-render-mode="shadow"]) .slds-media {
+   /* Media Object classes need to be pulled out for reusability */
+   :host([data-render-mode="shadow"]) .slds-media {
     display: flex;
     align-items: flex-start;
   }
-
-  :host([data-render-mode="shadow"]) .slds-media__figure {
+   :host([data-render-mode="shadow"]) .slds-media__figure {
     flex-shrink: 0;
     margin-inline-end: var(--slds-g-spacing-3);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+   :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
     min-width: var(--slds-g-sizing-10);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media__body {
+   :host([data-render-mode="shadow"]) .slds-media__body {
     flex: 1;
     min-width: 0;
   }
-
-  :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
+   :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
   .slds-media__body> :last-child {
     margin-block-end: 0;
   }
-
-  :host([data-render-mode="shadow"]) .slds-media-body-iefix {
+   :host([data-render-mode="shadow"]) .slds-media-body-iefix {
     flex-shrink: 0;
     flex-basis: auto;
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
     margin-inline-end: var(--slds-g-spacing-1);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
     margin-inline-start: var(--slds-g-spacing-1);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
     margin-inline-end: var(--slds-g-spacing-5);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
     margin-inline-start: var(--slds-g-spacing-5);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
+   :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
     flex: 0 1 auto;
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_center {
+   :host([data-render-mode="shadow"]) .slds-media_center {
     align-items: center;
   }
-
-  :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
+   :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
     margin-block: 0;
     margin-inline-start: var(--slds-g-spacing-3);
     margin-inline-end: 0;
   }
-
    @media (width <= 48em) {
 
     :host([data-render-mode="shadow"]) .slds-media_responsive {
@@ -249,4 +202,3 @@
        margin-inline-end: 0;
      }
    }
- }

package/src/lightning/baseFormattedText/baseFormattedText.js

@@ -1,5 +1,6 @@
 import { LightningElement, api, track } from 'lwc';
 import {
+    isTextIgnoreRTL,
     normalizeBoolean,
     parseToFormattedLinkifiedParts,
 } from 'lightning/utilsPrivate';
@@ -66,7 +67,6 @@ export default class BaseFormattedText extends LightningElement {
     }
 
     get ignoreRTL() {
-        // Ignoring RTL for hex color codes
-        return this.isString && this.value.match(/^#[0-9abcdef]{6}$/i) !== null;
+        return isTextIgnoreRTL(this.value);
     }
 }

package/src/lightning/button/button.js

@@ -266,7 +266,8 @@ export default class LightningButton extends LightningPrimitiveButton {
         // change host style to disable pointer event.
         this.template.host.style.pointerEvents = this.disabled ? 'none' : '';
         // setup kinetics
-        if (hasAnimation() && !this._disableAnimation) {
+
+        if (!this.disabled && hasAnimation() && !this._disableAnimation) {
             const attributes = getKineticsAttributes(this._normalizedVariant);
             attributes.forEach(({ name, value }) => {
                 this.button.setAttribute(name, value);

package/src/lightning/button/button.slds.css

@@ -217,7 +217,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

package/src/lightning/buttonIcon/button-icon.slds.css

@@ -220,7 +220,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

package/src/lightning/buttonIconStateful/button-icon-stateful.slds.css

@@ -2,8 +2,8 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
   /* :host::part(button-icon-stateful), */
+
   :host([data-render-mode="shadow"]) [part='button-icon-stateful'] {
     display: inline-flex;
     color: var(--slds-c-buttoniconstateful-color-foreground);
@@ -40,6 +40,7 @@
   }
 
   /* :host([variant='border-filled'])::part(button-icon-stateful), */
+
   :host([data-render-mode="shadow"][variant='border-filled']) [part='button-icon-stateful'] {
     --slds-c-buttonicon-borderfilled-color-background: var(
       --slds-c-buttoniconstateful-borderfilled-color-background
@@ -67,6 +68,7 @@
   }
 
   /* :host([variant='border-inverse'])::part(button-icon-stateful), */
+
   :host([data-render-mode="shadow"][variant='border-inverse']) [part='button-icon-stateful'] {
     --slds-c-buttonicon-borderinverse-color-border: var(
       --slds-c-buttoniconstateful-borderinverse-color-border
@@ -96,6 +98,7 @@
   }
 
   /* Selected + Variants */
+
   :host([data-render-mode="shadow"][selected]) [part='button-icon-stateful'] {
     --slds-c-buttoniconstateful-color-foreground: var(
       --slds-c-buttoniconstateful-color-foreground-selected,
@@ -242,4 +245,3 @@
       var(--slds-c-buttoniconstateful-color-background-selected-focus)
     );
   }
-}

package/src/lightning/buttonIconStateful/button-icon.slds.css

@@ -220,7 +220,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

package/src/lightning/buttonIconStateful/button.slds.css

@@ -217,7 +217,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

package/src/lightning/buttonMenu/button-icon.slds.css

@@ -220,7 +220,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

package/src/lightning/buttonMenu/button-menu.slds.css

@@ -2,12 +2,12 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
   /**
    * Spacing amount between elements in button_icon versus standard button
    * are different so we target button_icon specifically. display: flex
    * comes from parent button styles.
    */
+
   :host([data-render-mode="shadow"]) [part='button-icon'] {
     gap: var(--slds-g-spacing-1);
   }
@@ -21,6 +21,7 @@
    * Refactoring to component version is important, until then this code is
    * fragile because it is forked, changes to button-icon won't be reflected here.
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-more {
     --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
@@ -32,6 +33,7 @@
    * SLDS sizing of the "more" icon is inconsistent and potentially broken.
    * Until fixed, we'll stick with a consistent size across all size variants.
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-more lightning-primitive-icon:last-of-type {
     --slds-c-icon-sizing: var(--slds-g-sizing-3);
   }
@@ -39,6 +41,7 @@
   /**
    * Sizing hacks
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-xx-small {
     /* No hook for the value we need, so we calc to get it and keep things relative */
     --slds-c-buttonicon-spacing-block: calc(var(--slds-g-spacing-1) / 1.5);
@@ -67,6 +70,7 @@
   /**
    * Variant Hacks - Container
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-container {
     --slds-c-buttonicon-color-border: transparent;
     --slds-c-buttonicon-color-border-hover: transparent;
@@ -79,6 +83,7 @@
   /**
    * Variant Hacks - Border Filled
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-border-filled {
     --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
@@ -89,6 +94,7 @@
   /**
    * Variant Hacks - Border Inverse
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-border-inverse {
     /* Border */
     --slds-c-buttonicon-color-border: var(--slds-g-color-brand-base-100);
@@ -135,6 +141,7 @@
   /**
    * Variant Hacks - Bare
    */
+
   :host([data-render-mode="shadow"]) .slds-button_icon-bare {
     --slds-c-buttonicon-color-border: transparent;
     --slds-c-buttonicon-color-border-hover: transparent;
@@ -146,4 +153,3 @@
     /* Disabled */
     --slds-c-buttonicon-color-border-disabled: transparent;
   }
-}

package/src/lightning/buttonMenu/button.slds.css

@@ -217,7 +217,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

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

@@ -2,7 +2,6 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) {
     /* button text */
     --slds-c-button-neutral-text-color: var(--slds-c-buttonstateful-text-color);
@@ -39,6 +38,7 @@
   }
 
   /* vertical alignment for icon and text */
+
   :host([data-render-mode="shadow"]) .slds-text-not-selected,:host([data-render-mode="shadow"]) 
   .slds-text-selected,:host([data-render-mode="shadow"]) 
   .slds-text-selected-focus {
@@ -46,30 +46,35 @@
   }
 
   /* not selected: */
+
   :host([data-render-mode="shadow"]) .slds-not-selected .slds-text-selected,:host([data-render-mode="shadow"]) 
   .slds-not-selected .slds-text-selected-focus {
     display: none;
   }
 
   /* selected focus */
+
   :host([data-render-mode="shadow"]) .slds-is-selected-clicked .slds-text-not-selected,:host([data-render-mode="shadow"]) 
   .slds-is-selected-clicked .slds-text-selected-focus {
     display: none;
   }
 
   /* selected but not active */
+
   :host([data-render-mode="shadow"]) .slds-is-selected .slds-text-not-selected,:host([data-render-mode="shadow"]) 
   .slds-is-selected .slds-text-selected-focus {
     display: none;
   }
 
   /* selected + hover/focus: remove selected text */
+
   :host([data-render-mode="shadow"]) .slds-is-selected:hover .slds-text-selected,:host([data-render-mode="shadow"]) 
   .slds-is-selected:focus .slds-text-selected {
     display: none;
   }
 
   /* selected + hover: show hover/focus text */
+
   :host([data-render-mode="shadow"]) .slds-is-selected:hover .slds-text-selected-focus,:host([data-render-mode="shadow"]) 
   .slds-is-selected:focus .slds-text-selected-focus {
     display: contents;
@@ -78,4 +83,3 @@
   :host([data-render-mode="shadow"]) .slds-is-selected:not(:hover) {
     border-color: transparent;
   }
-}

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

@@ -217,7 +217,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

package/src/lightning/buttonStateful/buttonStateful.js

@@ -6,6 +6,7 @@ import {
     normalizeString as normalize,
     buttonGroupOrderClass,
 } from 'lightning/utilsPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const DEFAULT_VARIANT = 'neutral';
 
@@ -120,7 +121,9 @@ export default class LightningButtonStateful extends LightningShadowBaseClass {
      */
     @api
     focus() {
-        this.template.querySelector('button').focus();
+        if (isCSR) {
+            this.template.querySelector('button').focus();
+        }
     }
 
     // update custom element's classList

package/src/lightning/calendar/calendar.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

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

@@ -2,9 +2,9 @@
 /* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
     /* Adding these instead of sldsCommon
     as they are conflicting with synthetic styles */
+
     :host([data-render-mode="shadow"]) button,:host([data-render-mode="shadow"]) 
     input,:host([data-render-mode="shadow"]) 
     optgroup,:host([data-render-mode="shadow"]) 
@@ -49,6 +49,7 @@ 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"]) 
     [part~="calendar"] tbody > tr > td.slds-is-today > .slds-day {
@@ -72,6 +73,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     /* Indicates selected days */
+
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-selected > .slds-day {
         background: var(--slds-g-color-accent-container-2);
         color: var(--slds-g-color-on-accent-1);
@@ -84,17 +86,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     /* Aligns filter items horizontally */
+
     :host([data-render-mode="shadow"]) .slds-datepicker__filter {
         padding: var(--slds-g-spacing-1);
     }
 
     /* Spaces out month filter */
+
     :host([data-render-mode="shadow"]) .slds-datepicker__filter_month,:host([data-render-mode="shadow"]) 
     .slds-datepicker__filter--month {
         padding: 0 var(--slds-g-spacing-1) 0 0;
     }
 
     /* Month Table */
+
     :host([data-render-mode="shadow"]) .slds-datepicker__month {
         font-size: var(--slds-g-font-scale-neg-3);
       }
@@ -105,6 +110,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     /* Indicates days that are in previous/next months */
+
     :host([data-render-mode="shadow"]) .slds-day_adjacent-month {
         color: var(--slds-g-color-border-base-4);
     }
@@ -198,11 +204,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         text-decoration: underline;
         color: var(--slds-g-color-accent-4);
     }
+
     :host([data-render-mode="shadow"]) .slds-text-link:active {
         color: var(--slds-g-color-accent-3);
     }
 
     /* Utilities Grid */
+
     :host([data-render-mode="shadow"]) .slds-grid {
         display: flex;
     }
@@ -227,4 +235,3 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     :host([data-render-mode="shadow"]) .slds-grow {
         flex-grow: 1;
     }
-}