lightning-base-components 1.21.9-alpha → 1.22.2-alpha

package/src/lightning/interactiveDialogBase/modal-base.slds.css

@@ -0,0 +1,242 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+  /**
+   * Remap to SLDS blueprint hooks for parity
+   * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+   *
+   * "Shared" Styling Hooks for modal base/header/body/footer
+   */
+
+  :host([data-render-mode="shadow"]) [part='modal-backdrop'] {
+    --slds-c-backdrop-color-background: var(--slds-c-modalbase-backdrop-color-background);
+  }
+
+  :host([data-render-mode="shadow"]) [part='modal'] {
+    /* Map modal component hooks to single "shared" hooks from blueprint */
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+
+    /* '--slds-c-modal-shadow' is used in body/footer */
+    --slds-c-modalbody-shadow: var(--slds-c-modal-shadow);
+    --slds-c-modalfooter-shadow: var(--slds-c-modal-shadow);
+
+    /* '--slds-c-modal-color-border' is used in header/footer */
+    --slds-c-modalheader-color-border: var(--slds-c-modal-color-border);
+    --slds-c-modalfooter-color-border: var(--slds-c-modal-color-border);
+
+
+    /* '--slds-c-modal-radius-border' is used in header/body/footer */
+    --slds-c-modalheader-radius-border: var(--slds-c-modal-radius-border);
+    --slds-c-modalbody-radius-border: var(--slds-c-modal-radius-border);
+    --slds-c-modalfooter-radius-border: var(--slds-c-modal-radius-border);
+
+    /* '--slds-c-modal-sizing-border' is used in header/footer */
+    --slds-c-modalheader-sizing-border: var(--slds-c-modal-sizing-border);
+    --slds-c-modalfooter-sizing-border: var(--slds-c-modal-sizing-border);
+
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+
+  }
+
+  :host([data-render-mode="shadow"]) .slds-backdrop {
+    transition-duration: 0.4s;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    background: var(--slds-c-modalbase-backdrop-color-background, var(--slds-g-color-neutral-10-opacity-50, rgba(8, 7, 7, 60%)));
+    z-index: 9000;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-backdrop_open {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.4s linear;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal {
+    opacity: 0;
+    visibility: hidden;
+    transition: transform 0.1s linear, opacity 0.1s;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    z-index: 9001
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__container {
+    position: relative;
+    transform: translate(0, 0);
+    transition: transform 0.1s linear, opacity 0.1s linear;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0 var(--slds-g-spacing-6);
+    height: 100%;
+    padding: var(--slds-g-spacing-8) 0 var(--slds-g-spacing-12) 0;
+    border-radius: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__close {
+    width: 2rem;
+    height: 2rem;
+    margin-inline-start: auto;
+    position: relative;
+    inset-block-end: var(--slds-g-spacing-2);
+    inset-inline-end: (var(--slds-g-spacing-2) * -1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-fade-in-open {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.1s linear;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-fade-in-open .slds-modal__container-reset {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(0, 0);
+  }
+
+  /* Sizes: Small, Medium, Large */
+
+  @media (width >= 48em) {
+    :host([data-render-mode="shadow"]) .slds-modal__container {
+      margin: 0 auto;
+      width: 50%;
+      max-width: 40rem;
+      min-width: 20rem;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_small .slds-modal__container {
+      width: 60%;
+      max-width: 52.0625rem;
+      min-width: 40rem;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_medium .slds-modal__container {
+      width: 70%;
+      max-width: 75rem;
+      min-width: 40rem;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_large .slds-modal__container {
+      width: 90%;
+      max-width: none;
+      min-width: 40rem;
+    }
+  }
+
+  /* Sizes: Full */
+
+  /* .slds-modal_full {} */
+
+  /* Behaves like large size when not in a small viewport */
+
+  @media (width >= 48em) {
+    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
+      width: 90%;
+      max-width: none;
+      min-width: 40rem;
+    }
+  }
+
+  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+
+  @media (width <= 30em) {
+    :host([data-render-mode="shadow"]) .slds-modal_full {
+      /* Account for iOS safe areas so our modal doesn't load underneath iOS elements. */
+      inset-block-start: env(safe-area-inset-top, 0);
+
+      /* Override slds-modal's bottom: 0 so we can make the height dynamic. */
+      inset-block-end: auto;
+
+      /* Viewport may be dynamic, e.g., iOS Safari toolbar hiding behavior, so we use dvh. Safe areas may not be required here. */
+      /* stylelint-disable-next-line unit-no-unknown */
+      height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
+      width: 100%;
+      max-width: none;
+      min-width: 0;
+      margin: 0;
+      padding: var(--slds-g-spacing-4) 0 0 0;
+      background-color: var(--slds-c-modalbase-color-background, var(--slds-g-color-surface-1));
+      border-radius: 0;
+
+      /* Establishes the main layout of the modal. Grid is defined by grid-template-areas
+        which explicitly defines the grid and allows optional elements to be omitted like
+        the header or footer. */
+      display: grid;
+      /* stylelint-disable-next-line unit-no-unknown */
+      height: 100dvh;
+      grid-template-columns: 1fr;
+      grid-template-rows: min-content min-content 1fr min-content;
+      grid-template-areas: "close" "header" "content" "footer";
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close {
+      grid-area: close;
+      inset-inline-end: var(--slds-g-spacing-4);
+
+      /**
+       * A few things going on here:
+       * - We want to avoid a markup change for a single modifier so we reassign/override.
+       * - Button icon doesn't have component level hooks (yet), so we don't include them here
+       *   and we have to override the CSS property instead of reassign.
+       * - States on button have a bug, they override instead of reassign hooks
+       *   so the values of empty hooks default to initial values. In the case
+       *   of background colors, the background will disappear (initial = transparent).
+       */
+      --slds-c-button-color-background: var(--slds-g-color-surface-container-1, white);
+      --slds-c-button-color-background-active: var(--slds-g-color-surface-container-1, white);
+
+      color: var(--slds-g-color-on-surface-1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close:hover,:host([data-render-mode="shadow"]) 
+    .slds-modal_full .slds-modal__close:focus {
+      color: var(--slds-g-color-accent-3);
+    }
+
+    /**
+     * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
+     *
+     * SLDS Blueprint <> LBC Parity Patch
+     *
+     * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
+     * account for the differences introduced in the LBC implementation. Location
+     * of this code would ideally live within the LBC component CSS module but
+     * synthetic shadow and how LBC deconstructs the modal into individual components
+     * makes this not feasible. Not ideal, but this is the best solution for now.
+     * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
+     */
+    :host([data-render-mode="shadow"]) .slds-modal_full lightning-button-icon+div,:host([data-render-mode="shadow"]) 
+    .slds-modal_full lightning-modal {
+      display: contents;
+    }
+  }
+
+  /* TODO W-12674349: remove after assistive text util is added */
+
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+  }

package/src/lightning/interactiveDialogBase/modal-body.slds.css

@@ -0,0 +1,60 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+  :host([data-render-mode="shadow"]) .slds-modal__content_headless {
+    border-start-end-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+    border-start-start-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__content {
+    /**
+     * Remap to SLDS blueprint hooks for parity
+     * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+     */
+    --slds-c-modal-content-color-background: var(--slds-c-modalbody-color-background);
+    --slds-c-modal-content-text-color: var(--slds-c-modalbody-text-color);
+
+    background-color: var(--slds-c-modalbody-color-background, var(--slds-g-color-surface-container-1));
+    color: var(--slds-c-modalbody-text-color);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__content_footless {
+    border-bottom-right-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+    border-bottom-left-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+    box-shadow: var(--slds-c-modalbody-shadow, var(--slds-g-shadow-2));
+  }
+
+  /* Sizes: Full */
+
+  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+
+  @media (width <= 30em) {
+    :host([data-render-mode="shadow"][data-size='full']) [part='modal-body'] {
+      grid-area: content;
+    }
+
+    :host([data-render-mode="shadow"][data-size='full'][data-variant-footless]) [part='modal-body'] {
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      box-shadow: none;
+    }
+
+    /**
+     * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
+     *
+     * SLDS Blueprint <> LBC Parity Patch
+     *
+     * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
+     * account for the differences introduced in the LBC implementation. Location
+     * of this code would ideally live within the LBC component CSS module but
+     * synthetic shadow and how LBC deconstructs the modal into individual components
+     * makes this not feasible. Not ideal, but this is the best solution for now.
+     * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
+     */
+    :host([data-render-mode="shadow"][data-size='full']) {
+      display: contents;
+    }
+  }

package/src/lightning/interactiveDialogBase/modal-footer.slds.css

@@ -0,0 +1,79 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+  :host([data-render-mode="shadow"]) .slds-modal__footer {
+
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
+
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+
+    /**
+     * Remap to SLDS blueprint hooks for parity
+     * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+     */
+    --slds-c-modal-footer-color-background: var(--slds-c-modalfooter-color-background);
+    --slds-c-modal-footer-text-color: var(--slds-c-modalfooter-text-color);
+    --slds-c-modal-footer-spacing-block-start: var(--slds-c-modalfooter-spacing-block-start);
+    --slds-c-modal-footer-spacing-inline-end: var(--slds-c-modalfooter-spacing-inline-end);
+    --slds-c-modal-footer-spacing-block-end: var(--slds-c-modalfooter-spacing-block-end);
+    --slds-c-modal-footer-spacing-inline-start: var(--slds-c-modalfooter-spacing-inline-start);
+
+    border-end-end-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
+    border-end-start-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
+    border-block-start-width: var(--slds-c-modalfooter-sizing-border, var(--slds-g-sizing-border-2));
+    border-block-start-style: solid;
+    border-block-start-color: var(--slds-c-modalfooter-color-border, var(--slds-g-color-border-1));
+    background-color: var(--slds-c-modalfooter-color-background, var(--slds-g-color-surface-container-2));
+    color: var(--slds-c-modalfooter-text-color);
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    padding-block-start: var(--slds-c-modalfooter-spacing-block-start, var(--slds-g-spacing-3));
+    padding-inline-end: var(--slds-c-modalfooter-spacing-inline-end, var(--slds-g-spacing-4));
+    padding-block-end: var(--slds-c-modalfooter-spacing-block-end, var(--slds-g-spacing-3));
+    padding-inline-start: var(--slds-c-modalfooter-spacing-inline-start, var(--slds-g-spacing-4));
+    text-align: right;
+    box-shadow: var(--slds-c-modalfooter-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
+
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  /* TODO W-12674349: Replace with visibility utility classes when available */
+
+  :host([data-render-mode="shadow"]) .slds-hide {
+    display: none !important;
+  }
+
+  /* Sizes: Full */
+
+  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+
+  @media (width <= 30em) {
+    :host([data-render-mode="shadow"][data-size='full']) [part='modal-footer'] {
+      grid-area: footer;
+      border-start-end-radius: 0;
+      border-end-start-radius: 0;
+      box-shadow: none;
+    }
+
+    /**
+     * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
+     *
+     * SLDS Blueprint <> LBC Parity Patch
+     *
+     * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
+     * account for the differences introduced in the LBC implementation. Location
+     * of this code would ideally live within the LBC component CSS module but
+     * synthetic shadow and how LBC deconstructs the modal into individual components
+     * makes this not feasible. Not ideal, but this is the best solution for now.
+     * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
+     */
+    :host([data-render-mode="shadow"][data-size='full']) {
+      display: contents;
+    }
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__footer .slds-button + .slds-button {
+      margin-left: var(--slds-g-spacing-2);
+  }

package/src/lightning/interactiveDialogBase/modal-header.slds.css

@@ -0,0 +1,76 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
+
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+
+  :host([data-render-mode="shadow"]) .slds-modal__header {
+    /**
+     * Remap to SLDS blueprint hooks for parity
+     * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+     */
+    --slds-c-modal-header-color-background: var(--slds-c-modalheader-color-background);
+    --slds-c-modal-header-text-color: var(--slds-c-modalheader-text-color);
+    --slds-c-modal-header-spacing-block-start: var(--slds-c-modalheader-spacing-block-start);
+    --slds-c-modal-header-spacing-inline-end: var(--slds-c-modalheader-spacing-inline-end);
+    --slds-c-modal-header-spacing-block-end: var(--slds-c-modalheader-spacing-block-end);
+    --slds-c-modal-header-spacing-inline-start: var(--slds-c-modalheader-spacing-inline-start);
+
+    --slds-c-modal-heading-font-size: var(--slds-c-modalheader-heading-font-size);
+    --slds-c-modal-heading-font-weight: var(--slds-c-modalheader-heading-font-weight);
+    --slds-c-modal-heading-font-lineheight: var(--slds-c-modalheader-heading-font-lineheight);
+
+    position: relative;
+    border-start-end-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
+    border-start-start-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
+    border-block-end-width: var(--slds-c-modalheader-sizing-border, var(--slds-g-sizing-border-2));
+    border-block-end-style: solid;
+    border-block-end-color: var(--slds-c-modalheader-color-border, var(--slds-g-color-border-1));
+    background-color: var(--slds-c-modalheader-color-background, var(--slds-g-color-surface-container-1));
+    color: var(--slds-c-modalheader-text-color);
+    flex-shrink: 0;
+    padding-block-start: var(--slds-c-modalheader-spacing-block-start, var(--slds-g-spacing-4));
+    padding-inline-end: var(--slds-c-modalheader-spacing-inline-end, var(--slds-g-spacing-4));
+    padding-block-end: var(--slds-c-modalheader-spacing-block-end, var(--slds-g-spacing-4));
+    padding-inline-start: var(--slds-c-modalheader-spacing-inline-start, var(--slds-g-spacing-4));
+    text-align: center;
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
+
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__title {
+    font-weight: var(--slds-c-modalheader-heading-font-weight);
+    font-size: var(--slds-c-modalheader-heading-font-size, 1.25rem);
+    line-height: var(--slds-c-modalheader-heading-font-lineheight, var(--slds-g-font-lineheight-2));
+  }
+
+  /* Sizes: Full */
+
+  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+
+  @media (width <= 30em) {
+    :host([data-render-mode="shadow"][data-size='full']) [part='modal-header'] {
+      grid-area: header;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    /**
+     * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
+     *
+     * SLDS Blueprint <> LBC Parity Patch
+     *
+     * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
+     * account for the differences introduced in the LBC implementation. Location
+     * of this code would ideally live within the LBC component CSS module but
+     * synthetic shadow and how LBC deconstructs the modal into individual components
+     * makes this not feasible. Not ideal, but this is the best solution for now.
+     * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
+     */
+    :host([data-render-mode="shadow"][data-size='full']) {
+      display: contents;
+    }
+  }

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

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

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

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

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

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

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

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>55.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/modalBase/modalBase.js

@@ -579,11 +579,13 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         // headerLabelIsPopulated is equivalent labelIsEmpty, but from modalHeader level
         if (headerRegistered) {
             if (headerLabelId && headerLabelIsPopulated) {
-                this.ariaObserver.connect({
-                    targetNode: this.modalWrapper,
-                    attribute: 'aria-labelledby',
-                    relatedNodes: [this.headerTitleRef],
-                });
+                if (this.ariaObserver) {
+                    this.ariaObserver.connect({
+                        targetNode: this.modalWrapper,
+                        attribute: 'aria-labelledby',
+                        relatedNodes: [this.headerTitleRef],
+                    });
+                }
                 synchronizeAttrs(this.modalWrapper, { [ARIA.LABEL]: null });
                 // if labelId not set OR header label value not set,
                 // must console.error

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

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>55.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

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

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>55.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

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

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>55.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/picklist/picklist.js

@@ -1,7 +1,8 @@
 import labelNoneLabel from '@salesforce/label/LightningPicklist.noneLabel';
 import labelAvailable from '@salesforce/label/LightningPicklist.available';
 import labelChosen from '@salesforce/label/LightningPicklist.chosen';
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { normalizeBoolean, arraysEqual } from 'lightning/utilsPrivate';
 import formFactor from '@salesforce/client/formFactor';
 import { isCSR } from 'lightning/utilsPrivate';
@@ -13,7 +14,7 @@ const i18n = {
 };
 const PROGRAMMATIC_CHANGE = true;
 
-export default class LightningPicklist extends LightningElement {
+export default class LightningPicklist extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     // The value that is passed into the sub-components. dual-listbox accepts an array whereas combobox expects a string

package/src/lightning/pill/pill.js

@@ -362,7 +362,7 @@ export default class LightningPill extends LightningShadowBaseClass {
     handleBlur(event) {
         event.stopPropagation();
         const pillRelatedTarget =
-            event.relatedTarget || event.detail[buttonRelatedTarget];
+            event.relatedTarget || event.detail?.[buttonRelatedTarget];
         if (!pillRelatedTarget || !this.template.contains(pillRelatedTarget))
             this.dispatchBlurEvent(pillRelatedTarget);
     }

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

@@ -280,7 +280,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
   --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
@@ -296,6 +296,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
    --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+
+   /** 
+    * Needed to override 
+    * `pointer-event: none` coming from sds
+    * that prevent tooltip from showing
+   */
+   pointer-events: auto;
+   cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -315,36 +323,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
   --slds-c-button-neutral-color-background: var(
     --slds-c-button-brand-color-background,
-    var(--slds-g-color-accent-container-2)
+    var(--slds-g-color-accent-container-1)
   );
   --slds-c-button-neutral-color-background-hover: var(
     --slds-c-button-brand-color-background-hover,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-focus: var(
     --slds-c-button-brand-color-background-focus,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-active: var(
     --slds-c-button-brand-color-background-active,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
 
   --slds-c-button-neutral-color-border: var(
     --slds-c-button-brand-color-border,
-    var(--slds-g-color-border-accent-2)
+    var(--slds-g-color-border-accent-1)
   );
   --slds-c-button-neutral-color-border-hover: var(
     --slds-c-button-brand-color-border-hover,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-focus: var(
     --slds-c-button-brand-color-border-focus,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-active: var(
     --slds-c-button-brand-color-border-active,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
 
   /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -396,7 +404,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
-  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);