lightning-base-components 1.22.1-alpha → 1.22.3-alpha

package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.js

@@ -95,9 +95,7 @@ export default class LightningPrimitiveDatatableStatusBar extends LightningEleme
      */
     handleShowError() {
         Promise.resolve().then(() => {
-            const trigger = this.template.querySelector(
-                'lightning-primitive-datatable-tooltip'
-            );
+            const trigger = this.refs.tooltip;
 
             if (trigger) {
                 if (this.showErrorBubble) {

package/src/lightning/primitiveDatatableTooltip/primitiveDatatableTooltip.html

@@ -1,5 +1,6 @@
 <template>
     <button
+        lwc:ref="trigger"
         data-trigger="true"
         class={computedButtonClass}
         onmouseover={handleMouseOver}

package/src/lightning/primitiveDatatableTooltip/primitiveDatatableTooltip.js

@@ -104,7 +104,7 @@ export default class LightningPrimitiveDatatableTooltip extends LightningElement
     }
 
     get triggerElement() {
-        return this.template.querySelector('[data-trigger="true"]');
+        return this.refs.trigger;
     }
 
     handleMouseOver() {

package/src/lightning/primitiveDatatableTooltipBubble/primitiveDatatableTooltipBubble.html

@@ -16,7 +16,7 @@
                 alternative-text={i18n.closeButtonAssistiveText}
                 onclick={handleCloseButtonClick}
                 onkeydown={handleCloseButtonKey}
-                data-close="true"
+                lwc:ref="closeBtn"
             ></lightning-button-icon>
         </template>
 

package/src/lightning/primitiveDatatableTooltipBubble/primitiveDatatableTooltipBubble.js

@@ -82,7 +82,7 @@ export default class LightningPrimitiveDatatableTooltipBubble extends LightningE
     }
 
     get closeButton() {
-        return this.template.querySelector('[data-close="true"]');
+        return this.refs.closeBtn;
     }
 
     handleBlur = (evt) => {

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html

@@ -1,9 +1,11 @@
 <template>
     <template if:true={hasActions}>
         <lightning-button-menu
+            lwc:ref="buttonMenu"
             id="primitive-header-action-button-menu-id"
             icon-size="x-small"
             menu-alignment={_actionMenuAlignment}
+            title={alternativeText}
             alternative-text={alternativeText}
             variant="bare"
             onopen={handleMenuOpen}

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.js

@@ -58,7 +58,7 @@ export default class PrimitiveHeaderActions extends LightningElement {
      */
     @api
     focus() {
-        const btnMenu = this.template.querySelector('lightning-button-menu');
+        const btnMenu = this.refs.buttonMenu;
 
         if (btnMenu) {
             btnMenu.focus();
@@ -109,9 +109,7 @@ export default class PrimitiveHeaderActions extends LightningElement {
         event.preventDefault();
         event.stopPropagation();
 
-        this.elementRect = this.template
-            .querySelector('lightning-button-menu')
-            .getBoundingClientRect();
+        this.elementRect = this.refs.buttonMenu.getBoundingClientRect();
 
         this.dispatchEvent(
             new CustomEvent('privatecellheaderactionmenuopening', {

package/src/lightning/primitiveHeaderFactory/nonsortableHeader.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={computedClass} style={columnStyles}>
+    <div lwc:ref="child" class={computedClass} style={columnStyles}>
 
         <!-- Header Content -->
         <span class="slds-th__action" style={thActionStyles}>
@@ -7,12 +7,17 @@
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                     <lightning-icon icon-name={def.iconName} size="x-small" class="slds-icon_container slds-m-right_xx-small" alternative-text={def.label} title={def.label}></lightning-icon>
                     <template if:false={def.hideLabel} class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
-                        <span class={getHeaderLabelStyle}>{def.label}</span>
+                        <span class={getHeaderLabelClass} style={getHeaderLabelStyle}>{def.label}</span>
                     </template>
                 </div>
             </template>
             <template if:false={def.iconName}>
-                <span class={getHeaderLabelStyle} if:true={def.label} title={def.label}>{def.label}</span>
+                <span if:true={def.label}
+                    class={getHeaderLabelClass}
+                    style={getHeaderLabelStyle}
+                    title={def.label}>
+                    {def.label}
+                </span>
                 <span class="slds-truncate" if:false={def.label} title={def.ariaLabel}></span>
             </template>
 

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -58,11 +58,13 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     @api colIndex;
     @api columnWidth;
     @api dtContextId;
+    @api headerHeight;
     @api resizestep;
     @api showCheckbox = false;
     @api sorted;
     @api sortedDirection;
     @api showActionsMenu;
+    @api wrapTextMaxLines;
 
     /**
      * Retrieves the computed header DOM `id`
@@ -71,7 +73,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      */
     @api
     get computedColumnHeaderId() {
-        const el = this.template.querySelector('[data-column-header]');
+        const el = this.refs.columnHeader;
         return getRealDOMId(el);
     }
 
@@ -152,6 +154,20 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
 
     /************************** PUBLIC METHODS ***************************/
 
+    /**
+     * Retrieves the header cell's height
+     *
+     * @return {string} The height of the cell
+     */
+    @api
+    getDomHeight() {
+        const child = this.template.querySelector('.slds-hyphenate');
+        if (child) {
+            return child.offsetHeight;
+        }
+        return '';
+    }
+
     /**
      * Retrieves the header cell's width
      *
@@ -159,7 +175,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      */
     @api
     getDomWidth() {
-        const child = this.template.querySelector('.slds-cell-fixed');
+        const { child } = this.refs;
         if (child) {
             return child.offsetWidth;
         }
@@ -168,6 +184,14 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
 
     /************************** PRIVATE GETTERS **************************/
 
+    get shouldWrapText() {
+        const { _wrapTableHeader } = this;
+        return (
+            _wrapTableHeader === 'all' ||
+            (_wrapTableHeader === 'by-column' && this._def.wrapText)
+        );
+    }
+
     /**
      * Computes the styles for the column
      *
@@ -182,7 +206,9 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         const offsetStyle =
             document.dir === 'rtl' ? `right: ${this._def.offset}px;` : '';
         const widthStyle = columnWidth ? `width: ${columnWidth}px;` : '';
-        const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
+        const heightStyle = this.headerHeight
+            ? `height: ${this.headerHeight}`
+            : '';
 
         return `
             ${widthStyle}
@@ -226,22 +252,28 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     /**
      * Computes styling for header label
      */
-    get getHeaderLabelStyle() {
-        return this._wrapTableHeader
-            ? 'slds-line-clamp_small '
+    get getHeaderLabelClass() {
+        return this.shouldWrapText
+            ? 'slds-line-clamp slds-hyphenate'
             : 'slds-truncate';
     }
 
+    /**
+     * Computes styling for header label
+     */
+    get getHeaderLabelStyle() {
+        return this.shouldWrapText
+            ? `--lwc-lineClamp: ${this.wrapTextMaxLines || 'none'}`
+            : '';
+    }
+
     /**
      * Get th Action styles (needed for wrapping headers)
      *
      * @return {string} The computed classes
      */
     get thActionStyles() {
-        const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
-        return `
-            ${heightStyle}
-        `;
+        return this.headerHeight ? `height: ${this.headerHeight}` : '';
     }
 
     /**
@@ -494,9 +526,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      */
     updateBulkSelectionCheckbox() {
         const { bulkSelection } = this._def;
-        const allCheckbox = this.template.querySelector(
-            '.datatable-select-all'
-        );
+        const allCheckbox = this.refs.selectAll;
         allCheckbox.indeterminate = bulkSelection === 'some';
 
         // Note: since we have to handle the indeterminate state,

package/src/lightning/primitiveHeaderFactory/selectableHeader.html

@@ -1,13 +1,14 @@
 <template>
-    <span id="column-group-header" class="slds-assistive-text" data-column-header>
+    <span lwc:ref="columnHeader" id="column-group-header" class="slds-assistive-text" data-column-header>
         {computedColumnHeaderLabel}
     </span>
     <!-- Header Content -->
-    <div class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
+    <div lwc:ref="child" class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
         <template if:true={showCheckbox}>
             <span class="slds-checkbox">
                 <!-- Selectable Checkbox -->
                 <input
+                    lwc:ref="selectAll"
                     type="checkbox"
                     class="datatable-select-all"
                     name={computedOptionName}

package/src/lightning/primitiveHeaderFactory/sortableHeader.html

@@ -1,6 +1,6 @@
 <template>
     <!-- Header Content -->
-    <span class={computedClass} tabindex={internalTabIndex} style={columnStyles}>
+    <span lwc:ref="child" class={computedClass} tabindex={internalTabIndex} style={columnStyles}>
 
         <a href="javascript:void(0);"
            class={computedSortClass}
@@ -18,7 +18,7 @@
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                     <lightning-icon icon-name={def.iconName} size="x-small" class="slds-icon_container slds-m-right_xx-small" alternative-text={def.label} title={def.label}></lightning-icon>
                     <template if:false={def.hideLabel} class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
-                        <span class={getHeaderLabelStyle}>{def.label}</span>
+                        <span class={getHeaderLabelClass} style={getHeaderLabelStyle}>{def.label}</span>
                     </template>
 
                     <!-- Arrow Icon - Rotates based on sorting direction -->
@@ -31,7 +31,12 @@
                 </div>
             </template>
             <template if:false={def.iconName}>
-                <span class={getHeaderLabelStyle} title={def.label}>{def.label}</span>
+                <span
+                    class={getHeaderLabelClass}
+                    style={getHeaderLabelStyle}
+                    title={def.label}>
+                    {def.label}
+                </span>
                 <!-- Arrow Icon - Rotates based on sorting direction -->
                     <lightning-primitive-icon
                          class="slds-icon_container"

package/src/lightning/primitiveHeaderFactory/sortingMenuHeader.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
+    <div lwc:ref="child" class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
         <lightning-button-menu alternative-text="Show menu" internal-datatable-actions-menu icon-name="utility:threedots" variant="border-filled" menu-alignment="right" icon-size="x-small" tooltip={i18n.sortingMenuTooltip} onselect={handleSortingMenuSelection}>
             <lightning-menu-item value="MultiColumnSorting" label={i18n.sortingMenuMultiColumnSort}></lightning-menu-item>
             <lightning-menu-item value="ReorderRow" label={i18n.sortingMenuRows}></lightning-menu-item>

package/src/lightning/primitiveIcon/primitiveIcon.css

@@ -1,2 +1 @@
-@import './primitiveIcon.lbc.synthetic.css';
 @import './primitiveIcon.lbc.native.css';

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

@@ -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:

package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.html

@@ -7,7 +7,8 @@
         get initial focus when first tabbing into datatable
         JS in primitiveDatatableCell will focus input when appropriate
     -->
-    <input type="range"
+    <input lwc:ref="input"
+           type="range"
            value={value}
            min={minWidth}
            max={maxWidth}
@@ -19,7 +20,8 @@
            onkeydown={handleKeydown}
            tabindex="-1"
     >
-    <span class="slds-resizable__handle"
+    <span lwc:ref="resizeHandle"
+          class="slds-resizable__handle"
           data-is-last-col={isLastCol}
           onmousedown={onMouseDown}
           ontouchstart={onTouchStart}

package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.js

@@ -33,7 +33,7 @@ export default class PrimitiveResizeHandler extends LightningElement {
     }
 
     get resizeElement() {
-        return this.template.querySelector('.slds-resizable__handle');
+        return this.refs.resizeHandle;
     }
 
     /* Need this label only in Safari because VO doesn't announce the change when resized */
@@ -43,7 +43,7 @@ export default class PrimitiveResizeHandler extends LightningElement {
 
     @api
     focus() {
-        const inputEle = this.template.querySelector('input');
+        const inputEle = this.refs.input;
 
         if (inputEle) {
             inputEle.focus();

package/src/lightning/primitiveTreegridCellToggle/primitiveTreegridCellToggle.html

@@ -1,5 +1,5 @@
 <template>
-    <button type="button" class={computedButtonClass} tabindex={buttonTabIndex} title={buttonTitle} onclick={handleChevronClick}>
+    <button lwc:ref="button" type="button" class={computedButtonClass} tabindex={buttonTabIndex} title={buttonTitle} onclick={handleChevronClick}>
         <lightning-primitive-icon
             icon-name="utility:chevronright"
             variant="bare"

package/src/lightning/primitiveTreegridCellToggle/primitiveTreegridCellToggle.js

@@ -86,6 +86,6 @@ export default class PrivateTreeGridCellToggle extends LightningElement {
 
     @api
     focus() {
-        this.template.querySelector('button').focus();
+        this.refs.button.focus();
     }
 }

package/src/lightning/progressIndicator/progressIndicator.css

@@ -1 +1 @@
-@import './progressIndicator.lbc.synthetic.css'
+@import './progressIndicator.lbc.native.css';

package/src/lightning/progressIndicator/progressIndicator.js

@@ -1,5 +1,7 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
+import { isCSR } from 'lightning/utilsPrivate';
 import pathCurrentStage from '@salesforce/label/LightningProgressIndicator.pathCurrentStage';
 import {
     getStepIndex,
@@ -8,6 +10,7 @@ import {
 } from './utils';
 import base from './base.html';
 import path from './path.html';
+import progressIndicatorStylesheets from './progressIndicator.css';
 
 const i18n = {
     currentStageLabel: pathCurrentStage,
@@ -27,7 +30,9 @@ const DOWN = 40;
  * Provides a visual indication on the progress of a particular process.
  * @slot default Placeholder for lightning-progress-step.
  */
-export default class LightningProgressIndicator extends LightningElement {
+export default class LightningProgressIndicator extends LightningShadowBaseClass {
+    static stylesheets = [progressIndicatorStylesheets]; // stylesheets that apply to every rendered template
+
     /**
      * Changes the visual pattern of the indicator. Valid values are base and path.
      * The default is base.
@@ -95,10 +100,13 @@ export default class LightningProgressIndicator extends LightningElement {
     _currentStepLabel = '';
 
     connectedCallback() {
-        this.addEventListener(
-            'privateregisterstep',
-            this.handlePrivateRegisterStep.bind(this)
-        );
+        super.connectedCallback();
+        if (isCSR) {
+            this.addEventListener(
+                'privateregisterstep',
+                this.handlePrivateRegisterStep.bind(this)
+            );
+        }
     }
 
     renderedCallback() {

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

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

package/src/lightning/progressIndicator/progressIndicator.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './progress-indicator.slds.css';

package/src/lightning/progressStep/__examples__/basic/basic.html

@@ -0,0 +1,11 @@
+<template>
+    <p>
+        The steps are shown within a lightning-progress-indicator here.
+    </p>
+    <lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">
+        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
+        <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
+        <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
+        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
+    </lightning-progress-indicator>
+</template>

package/src/lightning/progressStep/__examples__/basic/basic.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class ProgressStepBasic extends LightningElement {}

package/src/lightning/progressStep/__examples__/shaded/shaded.html

@@ -0,0 +1,11 @@
+<template>
+    <p>
+        The shaded steps are shown within a lightning-progress-indicator here.
+    </p>
+    <lightning-progress-indicator current-step="3" type="base" has-error="true" variant="shade">
+        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
+        <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
+        <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
+        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
+    </lightning-progress-indicator>
+</template>

package/src/lightning/progressStep/__examples__/shaded/shaded.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class ProgressStepShaded extends LightningElement {}

package/src/lightning/progressStep/base.html

@@ -9,7 +9,8 @@
         <template if:true={hasIcon}>
             <lightning-primitive-icon
                     icon-name={baseIconName}
-                    svg-class="slds-icon slds-icon_xx-small"
+                    svg-class="slds-icon"
+                    size="xx-small"
                     variant="bare"></lightning-primitive-icon>
         </template>
         <span if:true={assistiveText} class="slds-assistive-text">{assistiveText}</span>

package/src/lightning/progressStep/progressStep.css

@@ -0,0 +1 @@
+@import './progressStep.lbc.native.css';

package/src/lightning/progressStep/progressStep.js

@@ -2,12 +2,14 @@ import labelCurrentStage from '@salesforce/label/LightningProgressIndicator.curr
 import labelStageComplete from '@salesforce/label/LightningProgressIndicator.stageComplete';
 import labelNotStartedStage from '@salesforce/label/LightningProgressIndicator.stageNotStarted';
 import labelErrorStage from '@salesforce/label/LightningProgressIndicator.errorStage';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
-import { classListMutation } from 'lightning/utilsPrivate';
+import { classListMutation, isCSR } from 'lightning/utilsPrivate';
 import { Tooltip, TooltipType, Direction } from 'lightning/tooltipLibrary';
 import path from './path.html';
 import base from './base.html';
+import progressStepStylesheets from './progressStep.css';
 
 // Temporary workaround until we get real label support. New label entries must
 // also be added to the static `labels` prop inside the class.
@@ -28,7 +30,10 @@ const baseIconNameMap = {
 /**
  * Defines a step in the lightning-progress-indicator.
  */
-export default class LightningProgressStep extends LightningElement {
+export default class LightningProgressStep extends LightningShadowBaseClass {
+    static stylesheets = [progressStepStylesheets]; // stylesheets that apply to every rendered template
+    static validationOptOut = ['class'];
+
     /**
      * Text string to reference the step of the progress indicator.
      * @type {string}
@@ -97,18 +102,22 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     connectedCallback() {
-        this.dispatchEvent(
-            new CustomEvent('privateregisterstep', {
-                bubbles: true,
-                detail: {
-                    callback: this.updateInternal.bind(this),
-                    stepName: this.value,
-                    setDeRegistrationCallback: (deRegistrationCallback) => {
-                        this._deRegistrationCallback = deRegistrationCallback;
+        super.connectedCallback();
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('privateregisterstep', {
+                    bubbles: true,
+                    detail: {
+                        callback: this.updateInternal.bind(this),
+                        stepName: this.value,
+                        setDeRegistrationCallback: (deRegistrationCallback) => {
+                            this._deRegistrationCallback =
+                                deRegistrationCallback;
+                        },
                     },
-                },
-            })
-        );
+                })
+            );
+        }
     }
 
     disconnectedCallback() {
@@ -232,21 +241,23 @@ export default class LightningProgressStep extends LightningElement {
         } else if (this._privateLabel && this.state.type && !this.isPath) {
             // Note that because the tooltip target is a child element it may not be present in the
             // dom during initial rendering.
-            this._tooltip = new Tooltip(this._privateLabel, {
-                root: this,
-                target: () => this.template.querySelector('div'),
-                type: TooltipType.Toggle,
-                align: {
-                    horizontal: Direction.Center,
-                    vertical: Direction.Bottom,
-                },
-                targetAlign: {
-                    horizontal: Direction.Center,
-                    vertical: Direction.Top,
-                },
-                disableAriaDescribedBy: true,
-            });
-            this._tooltip.initialize();
+            if (isCSR) {
+                this._tooltip = new Tooltip(this._privateLabel, {
+                    root: this,
+                    target: () => this.template.querySelector('div'),
+                    type: TooltipType.Toggle,
+                    align: {
+                        horizontal: Direction.Center,
+                        vertical: Direction.Bottom,
+                    },
+                    targetAlign: {
+                        horizontal: Direction.Center,
+                        vertical: Direction.Top,
+                    },
+                    disableAriaDescribedBy: true,
+                });
+                this._tooltip.initialize();
+            }
         }
     }
 }

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

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

package/src/lightning/progressStep/progressStep.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsVisibility';
+@import './progress-step.slds.css';

package/src/lightning/sldsCommon/sldsCommon.css

@@ -30,7 +30,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode='shadow']) a {
-    color: var(--slds-g-link-color, var(--slds-g-color-brand-base-50, #0176d3));
+    color: var(--slds-s-link-color);
     text-decoration: var(--_slds-g-font-decoration, none);
     transition: color 0.1s linear;
     background-color: transparent;

package/src/lightning/sldsUtilsThemes/sldsUtilsThemes.css

@@ -219,14 +219,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 */
 
 :host([data-render-mode="shadow"]) .slds-theme_warning ::part(button) {
-    color: var(--slds-g-color-neutral-base-30, #514f4d);
+    color: var(--slds-g-color-on-warning-1);
     text-decoration: underline;
 
-    --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-30, #514f4d);
+    --slds-c-icon-color-foreground: var(--slds-g-color-on-warning-1);
 }
 
-.slds-theme_warning ::part(button):hover {
-    color: var(--slds-g-color-neutral-base-50, #706e6b);
+:host([data-render-mode="shadow"]) .slds-theme_warning ::part(button):hover {
+    color: color-mix(in oklab, currentColor, transparent 25%);
+
+    --slds-c-icon-color-foreground: color-mix(in oklab, var(--slds-g-color-on-warning-1), transparent 25%);
 }
 
 :host([data-render-mode="shadow"])  .slds-theme_warning ::part(button):focus {