lightning-base-components 1.21.2-alpha → 1.21.4-alpha

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

@@ -147,7 +147,7 @@ To understand how we implemented SLDS in `lightning-tabset`, see the **Source Co
 
 #### Usage Considerations
 
-When a tabset contains more tabs than could fit on the screen, the tabs that don't fit are moved into a dropdown menu (also known as an overflow) next to the last tab that fits. Note that the active tab always shows and is never moved into the overflow. Truncating the tab label is not supported. When the tab label has more characters than can fit the viewport, the extra characters are not truncated but are hidden from view.
+When a tabset contains more tabs than can fit in the viewport, the tabs that don't fit are moved into a dropdown menu (also known as an overflow) next to the last tab that fits. Note that the active tab always shows and is never moved into the overflow. Truncating the tab label is not supported. When the tab label has more characters than can fit the viewport, the extra characters are not truncated but are hidden from view.
 
 You can nest `lightning-tab` within other elements such as `<div>` or `<template>`, for example to render tabs conditionally using `if:true` and `if:false`. Otherwise, you must nest
 `lightning-tab` directly within `lightning-tabset` tags.
@@ -157,6 +157,29 @@ active tabs content is queryable. In the example, the text `Content of Tab Two`
 
 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.
 
+#### Accessibility
+
+Use the Tab or arrow keys to navigate to the More menu that’s created when the viewport is too narrow to show all the tabs.
+
+Several attributes enable accessibility features for a tabset heading.
+
+Use `heading-label` to specify custom assistive text for a tabset heading. The value of `heading-label` is rendered as the text content of a `div` element with `role="heading"` and `aria-level="2"`. If you don't specify `heading-label` the default assistive text is "Tabs" in a `div` element with `aria-level="2"`.
+
+Use `heading-level` to pass a value between 1 and 6 to the rendered `aria-level` attribute. The default value is 2. This attribute requires you to also specify `heading-label`.
+
+Specify `heading-visible` to display the assistive text above the tabset when you specify `heading-label`. By default, this attribute is not present so the assistive text is read by screen readers but isn't displayed. When `heading-visible` is present, the assistive text is read by screen readers and displayed.
+
+This example sets custom assistive text for a heading, specifies `heading-level` to change the rendered `aria-level`, and makes the heading visible.
+
+```html
+<template>
+  <lightning-tabset heading-label="Example tabset" heading-level="3" heading-visible>
+    <lightning-tab label="Item One"> One Content! </lightning-tab>
+    <lightning-tab label="Item Two"> Two Content! </lightning-tab>
+  </lightning-tabset>
+</template>
+```
+
 #### Source Code
 
 `lightning-tabset` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/tabset/tabset.html

@@ -9,6 +9,7 @@
                 onprivatetablinkregister={handleTabLinkRegister}
             >{headingLabel}</div>
             <lightning-tab-bar
+                exportparts="tab-bar, tab-item"
                 variant={variant}
                 onselect={handleTabSelected}
                 aria-labelledby="tabset-heading"
@@ -17,6 +18,7 @@
         </template>
         <template lwc:else>
             <lightning-tab-bar
+                exportparts="tab-bar, tab-item"
                 variant={variant}
                 onselect={handleTabSelected}
                 aria-label={defaultAriaLabel}

package/src/lightning/tabset/tabset.js

@@ -28,6 +28,8 @@ export default class LightningTabset extends LightningShadowBaseClass {
     _headingLabel = null;
     _headingVisible = false;
     _headingLevel = 2;
+    // these headingLabel private variables are used to identify if this component
+    // requires a rerender based on a null headingLabel value change
     _headingLabelRerender = false;
     _headingLabelRemove = false;
     _headingLabelAdd = false;
@@ -44,7 +46,10 @@ export default class LightningTabset extends LightningShadowBaseClass {
     @api title;
 
     /**
-     * The string value to set the tabset heading label to
+     * Specifies text to use as custom assistive text for the tabset heading.
+     * The text is placed in a div element with role="heading" and aria-level="2".
+     * When heading-label isn't specified, the default assistive text is "Tabs" in
+     * a div element with aria-level="2".
      * @type {string|null} - the value to set for the tabset heading
      */
     @api
@@ -55,37 +60,23 @@ export default class LightningTabset extends LightningShadowBaseClass {
     set headingLabel(value) {
         const labelIsPopulated = value && value.trim().length > 0;
         const currentValue = this._headingLabel;
-        // unset the value, if conditions for valid label not met
         const nextValue = labelIsPopulated ? value : null;
         this._headingLabel = nextValue;
-        // need to handle dynamic changes after initial render cycle has occurred
-        // NOTE: W-14708987 was created to deal w/ an edge case described in B & C below
-        // (a) label was set, and changing to another label value.
-        //     ex: 'My Title' -> 'My Turtles' (fixed:W-14578712)
-        // (b) label was unset, and now has a value. (TODO: W-14708987)
-        //     ex: null -> 'My title'
-        // (c) label values was set, and now has value set null (TODO: W-14708987)
-        //     ex: 'My Title' -> null
-        // the issues with B and C occur due to how the template lwc:if / lwc:else
-        // is structured
-        // if the value is changing from: 'My Title' to 'My Bigger Title' (A above),
-        // no rerender is required, because the template logic is the same
-        // need to rerender the tabs, because the template logic IF / ELSE
-        // is triggered by transitioning between null and a populated value
+
+        // special case for when headingLabel is programatically set to null or a null
+        // headingLabel is set to a non-null value. See W-14708987 for more info.
         if (!this._firstRender) {
-            this._headingLabelRemove = currentValue && nextValue === null;
-            this._headingLabelAdd = currentValue === null && nextValue;
-            // need to trigger rerender of the entire tab set element
-            if (this._headingLabelRemove || this._headingLabelAdd) {
-                this._headingLabelRerender = true;
-                this._firstRender = true;
-            }
+            this._headingLabelRemove = currentValue && nextValue === null; // label to null
+            this._headingLabelAdd = currentValue === null && nextValue; // null to label
+            this._headingLabelRerender =
+                this._headingLabelRemove || this._headingLabelAdd;
         }
     }
 
     /**
-     * Determines if the heading should be visible or only screen reader visible
-     * when set, expects a boolean value. when not set, defaults to false
+     * Determines whether the text that’s passed with the heading-label attribute
+     * is visible above the tabset. This attribute isn't present by default so the
+     * assistive text is only read by screen readers.
      * @type {boolean} - the boolean value to set for heading visibility
      * @returns {boolean} - the boolean value set for heading visibility
      */
@@ -99,7 +90,8 @@ export default class LightningTabset extends LightningShadowBaseClass {
     }
 
     /**
-     * Determines the value to pass to aria-level. Accepts values in range [1,6].
+     * Specifies the value to pass through to aria-level when you specify heading-label.
+     * Accepts values from 1 to 6. The default value is 2.
      * @type {number} - the value to set for the heading's aria-level
      * @returns {number} - the value for setting the heading's aria-level
      */
@@ -214,12 +206,7 @@ export default class LightningTabset extends LightningShadowBaseClass {
     renderedCallback() {
         // always update the cached this._tabBarElem at the start of the render cycle
         this._cacheTabBarElem();
-        if (this.nativeShadowAndRerender) {
-            this._rerender = false;
-            this._updateTabBarHeaders(this._tabHeaders);
-            this._selectTab(this._activeTabValue);
-        }
-        if (this.headingLabelChangeRerender) {
+        if (this.nativeShadowAndRerender || this._headingLabelRerender) {
             this._rerender = false;
             this._headingLabelRerender = false;
             this._updateTabBarHeaders(this._tabHeaders);
@@ -421,16 +408,12 @@ export default class LightningTabset extends LightningShadowBaseClass {
         return this._rerender && !this.template.synthetic;
     }
 
-    get headingLabelChangeRerender() {
-        return !this._firstRender && this._headingLabelRerender;
-    }
-
     /* cache tabBar element when first accessed, or isCSR and not set */
     get tabBarElem() {
         if (isCSR) {
             if (
-                this._headingLabelRerender ||
                 this.nativeShadowAndRerender ||
+                this._headingLabelRerender ||
                 !this._tabBarElem
             ) {
                 this._cacheTabBarElem();
@@ -450,7 +433,11 @@ export default class LightningTabset extends LightningShadowBaseClass {
             // udpdate tabBar element, force to update elem if NS && Rerender
             // or always if it doesn't exist
             // order of IF checking is important
-            if (this.nativeShadowAndRerender || !this._tabBarElem) {
+            if (
+                this.nativeShadowAndRerender ||
+                this._headingLabelRerender ||
+                !this._tabBarElem
+            ) {
                 this._tabBarElem =
                     this.template.querySelector('lightning-tab-bar');
             }

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

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

package/src/lightning/tabset/tabset.slds.css

@@ -1,5 +1,4 @@
 
-@supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) .slds-vertical-tabs {
       display: flex;
       overflow: hidden;
@@ -12,4 +11,3 @@
   :host([data-render-mode="shadow"]) .slds-tabs_default .slds-tabs_default__header:not(.slds-assistive-text) {
     font-size: var(--sds-g-font-scale-neg-2, calc(var(--slds-g-font-scale-neg-1) / var(--slds-g-font-scale-ratio)));
   }
-}

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

@@ -25,21 +25,22 @@
  * for any needed updates to keep these files in sync
  */
 
-@supports (--styling-hooks: '') {
-    /* TODO: Swap with utility classes */
-    :host([data-render-mode="shadow"]) fieldset {
+/* TODO: Swap with utility classes */
+
+:host([data-render-mode="shadow"]) fieldset {
       border: 0;
       margin: 0;
       padding: 0;
     }
 
-    /* FORM ELEMENT: BASE */
-    :host([data-render-mode="shadow"]) .slds-form-element {
+/* FORM ELEMENT: BASE */
+
+:host([data-render-mode="shadow"]) .slds-form-element {
         position: relative;
         min-width: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__label {
+:host([data-render-mode="shadow"]) .slds-form-element__label {
         overflow-wrap: break-word;
         word-wrap: break-word;
         hyphens: auto;
@@ -51,20 +52,20 @@
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+:host([data-render-mode="shadow"]) .slds-form-element__label:empty {
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control {
+:host([data-render-mode="shadow"]) .slds-form-element__control {
         clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio {
+:host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio {
       display: block;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+:host([data-render-mode="shadow"]) .slds-form-element__icon {
         display: inline-block;
         position: relative;
         padding-block-start: var(--slds-g-spacing-1);
@@ -73,42 +74,42 @@
         z-index: 1;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+:host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+:host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
     .slds-form-element__helper {
         font-size: var(--slds-g-font-scale-neg-3);
         margin-block-start: calc(var(--slds-g-spacing-1) / 2);
         display: block;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+:host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
         width: calc(100% - var(--slds-g-sizing-7));
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+:host([data-render-mode="shadow"]) .slds-form-element_readonly {
         flex-basis: 0%;
         border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+:host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
         padding-block-start: calc(var(--slds-g-spacing-1) / 2);
         padding-block-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+:host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+:host([data-render-mode="shadow"]) .slds-form-element__legend {
         font-weight: var(--slds-g-font-weight-7);
         float: left;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+:host([data-render-mode="shadow"]) .slds-form-element__addon {
         display: inline-block;
         margin-block-start: 0;
         margin-block-end: 0;
@@ -117,7 +118,7 @@
         align-self: center;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static {
+:host([data-render-mode="shadow"]) .slds-form-element__static {
         overflow-wrap: break-word;
         word-wrap: break-word;
         word-break: break-word;
@@ -128,20 +129,20 @@
         width: 100%;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+:host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+:host([data-render-mode="shadow"]) .slds-form-element__static:empty {
         min-height: calc(var(--slds-g-sizing-6) + 1px);
         vertical-align: bottom;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+:host([data-render-mode="shadow"]) .slds-form-element__static--edit {
         width: calc(100% - var(--slds-g-sizing-7));
     }
 
-    :host([data-render-mode="shadow"]) .slds-required {
+:host([data-render-mode="shadow"]) .slds-required {
         color: var(--slds-g-color-error-base-50);
         margin-block-start: 0;
         margin-block-end: 0;
@@ -149,25 +150,25 @@
         margin-inline-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+:host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
         color: var(--slds-g-color-error-1);
     }
 
-    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+:host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
         color: var(--slds-g-color-error-1);
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: STACKED */
+/* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) {
+:host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+/* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
+/* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--slds-g-spacing-2);
     }
 
@@ -175,54 +176,54 @@
         padding: 0 var(--slds-g-spacing-1);
     } */
 
-    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
+/* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--slds-g-spacing-1);
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: INLINE */
+/* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant='label-inline']) {
+:host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
-    /*
+/*
     we have to combine with slds class here to avoid duplication
     of this rule in child elements who import this stylesheet
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
+:host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--slds-g-spacing-1);
         margin-block-end: var(--slds-g-spacing-2);
     }
 
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+/* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
+/* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--slds-g-spacing-2);
     }
 
@@ -235,11 +236,11 @@
         padding: var(--slds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
+:host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--slds-g-sizing-6)
     }
 
-    @media (width >= 48em) {
+@media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
@@ -281,35 +282,34 @@
         }
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: COMPOUND */
+/* FORM ELEMENT: COMPOUND */
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
       display: flex;
       margin-bottom: var(--slds-g-spacing-1);
       margin-left: calc(var(--slds-g-spacing-1) * -1);
       margin-right: calc(var(--slds-g-spacing-1) * -1);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
       padding-top: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
       padding-left: var(--slds-g-spacing-1);
       padding-right: var(--slds-g-spacing-1);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+:host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: HIDDEN */
+/* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
+:host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
-}

package/src/lightning/textarea/textarea.js

@@ -51,6 +51,8 @@ export default class LightningTextarea extends LightningShadowBaseClass {
     _helpMessageChanged = false;
     ariaObserver = null;
 
+    static validationOptOut = ['class'];
+
     /************************* PUBLIC PROPERTIES *************************/
 
     /**
@@ -366,7 +368,9 @@ export default class LightningTextarea extends LightningShadowBaseClass {
         if (this._inputElement) {
             return this._inputElement;
         }
-        this._inputElement = this.template.querySelector('textarea');
+        this._inputElement = isCSR
+            ? this.template.querySelector('textarea')
+            : null;
         decorateInputForDragon(this._inputElement);
         return this._inputElement;
     }
@@ -420,6 +424,9 @@ export default class LightningTextarea extends LightningShadowBaseClass {
 
     connectedCallback() {
         super.connectedCallback();
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
         this.updateHostClassList();
         this._connected = true;
         this.interactingState = new InteractingState();
@@ -427,7 +434,9 @@ export default class LightningTextarea extends LightningShadowBaseClass {
     }
 
     renderedCallback() {
-        this.ariaObserver.sync(this._isNativeShadow);
+        if (this.isConnected) {
+            this.ariaObserver.sync(this._isNativeShadow);
+        }
         // IE11: This is needed to work-around IE11 issue where it would append default value to the place holder,
         // instead of actually setting the value on the textarea element.
         if (!this._rendered) {

package/src/lightning/textarea/textarea.slds.css

@@ -1,10 +1,24 @@
 
-@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) {
+          /**
+          * Remap to SLDS blueprint hooks for parity
+          * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+          */
+
+          /* stylelint-disable */
+          --slds-c-textarea-spacing-blockstart: var(--slds-c-textarea-spacing-block-start);
+          --slds-c-textarea-spacing-blockend: var(--slds-c-textarea-spacing-block-end);
+          --slds-c-textarea-spacing-inlinestart: var(--slds-c-textarea-spacing-inline-start);
+          --slds-c-textarea-spacing-inlineend: var(--slds-c-textarea-spacing-inline-end);
+          /* stylelint-enable */
+  }
+
     /* sldsCommon.css file comments indicate intentionally
         not adding textarea selector to that file due to
         style leaks in synthetic shadow mode.
         adding here instead
     */
+
     :host([data-render-mode="shadow"]) textarea {
         color: inherit;
         font: inherit;
@@ -12,16 +26,14 @@
     }
 
     :host([data-render-mode="shadow"]) .slds-textarea {
-       /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
-
        /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
         appearance: none;
         min-height: var(--slds-c-textarea-sizing-min-height);
         width: 100%;
-        padding-block-start: var(--slds-c-textarea-spacing-block-start, var(--slds-g-spacing-2));
-        padding-inline-end: var(--slds-c-textarea-spacing-inline-end, var(--slds-g-spacing-3));
-        padding-block-end: var(--slds-c-textarea-spacing-block-end, var(--slds-g-spacing-2));
-        padding-inline-start: var(--slds-c-textarea-spacing-inline-start, var(--slds-g-spacing-3));
+        padding-block-start: var(--slds-c-textarea-spacing-blockstart, var(--slds-g-spacing-2));
+        padding-inline-end: var(--slds-c-textarea-spacing-inlineend, var(--slds-g-spacing-3));
+        padding-block-end: var(--slds-c-textarea-spacing-blockend, var(--slds-g-spacing-2));
+        padding-inline-start: var(--slds-c-textarea-spacing-inlinestart, var(--slds-g-spacing-3));
         background-color: var(--slds-c-textarea-color-background, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
         color: var(--slds-c-textarea-text-color);
         border: var(--slds-g-sizing-border-1) solid var(--slds-c-textarea-color-border, var(--slds-g-color-border-base-4, var(--slds-g-color-border-base-1)));
@@ -29,7 +41,6 @@
         box-shadow: var(--slds-c-textarea-shadow);
         resize: vertical;
         transition: border 0.1s linear, background-color 0.1s linear;
-        /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
 
         /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     }
@@ -64,6 +75,7 @@
     }
 
     /* replace .slds-has-error with invalid */
+
     :host([data-render-mode="shadow"][invalid]) .slds-textarea {
         --slds-c-textarea-color-background: var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100));
         --slds-c-textarea-color-border: var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50));
@@ -73,6 +85,7 @@
     }
 
     /* replace .slds-has-error with invalid */
+
     :host([data-render-mode="shadow"][invalid]) .slds-textarea:focus,:host([data-render-mode="shadow"][invalid]) .slds-textarea:active {
         --slds-c-textarea-text-color-focus: var(--slds-c-textarea-text-color-error-focus);
         --slds-c-textarea-color-background-focus: var(--slds-c-textarea-color-background-error-focus, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
@@ -80,6 +93,7 @@
     }
 
     /* TODO W-12674349: remove after name-value-list utils are added */
+
     :host([data-render-mode="shadow"]) .slds-assistive-text {
       position: absolute !important;
       margin: -1px !important;
@@ -92,4 +106,3 @@
       text-transform: none !important;
       white-space: nowrap !important;
   }
-}