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

package/src/lightning/modalFooter/modalFooter.js

@@ -8,13 +8,6 @@ const hideClass = 'slds-hide';
 // selectors
 const footerSelector = `.${footerClass}`;
 const footerSlotSelector = '[data-footer-slot]';
-// timeout footer height check
-// checking quickly yields faster resolution of correct
-// footer (not a typo) placement
-const SIZE_CHECK_TIMER = 50;
-// limited to 4 quick checks totalling 200 ms, which catches
-// any misreported heights based on reflow of content in modalFooter
-const MAX_HEIGHT_CHECKS = 4;
 
 /**
  * The modal footer component to display footer content in lightning modal.
@@ -25,9 +18,6 @@ export default class LightningModalFooter extends LightningElement {
     initialSlotRender = true;
     hideFooter = false;
     unregisterCallback = null;
-    footerHeightTracked = 0;
-    footerHeightChecked = 0;
-    timeoutId = 0;
 
     /**
      * Handle the default slot change event
@@ -67,9 +57,7 @@ export default class LightningModalFooter extends LightningElement {
         const divElem = this.template.querySelector(footerSelector);
         const footerRect = divElem ? divElem.getBoundingClientRect() : {};
         const { height } = footerRect;
-        const heightValue = height || 0;
-        this.footerHeightTracked = heightValue;
-        return heightValue;
+        return height || 0;
     }
 
     /**
@@ -113,20 +101,6 @@ export default class LightningModalFooter extends LightningElement {
         return firstElem;
     }
 
-    /**
-     * if not the intial render, check for footer height chnage,
-     * when a window resize occurs
-     * @returns {Object}
-     * @private
-     */
-    handleModalFooterResizeCheck() {
-        // when not intial render, and footer height changed
-        // return the tracked value, otherwise indicate no change
-        return !this.initialRender && this.hasFooterHeightChanged()
-            ? { changed: true, value: this.footerHeightTracked }
-            : { changed: false, value: null };
-    }
-
     /**
      * Register modalFooter with modal parent, including callbacks to
      * unregister the modal footer
@@ -143,8 +117,6 @@ export default class LightningModalFooter extends LightningElement {
                 defaultSlotIsPopulated: this.isDefaultSlotPopulated,
                 defaultSlotHasRendered: !this.initialSlotRender,
                 firstTabbableElemRef: this.firstTabbableElement,
-                checkFooterHeightCallback:
-                    this.handleModalFooterResizeCheck.bind(this),
                 unRegisterCallback: (unregisterCallback) => {
                     this.unregisterCallback = unregisterCallback;
                 },
@@ -153,46 +125,6 @@ export default class LightningModalFooter extends LightningElement {
         this.dispatchEvent(evtRegister);
     }
 
-    /**
-     * Provide a means to check whether the tracked footer height
-     * is different than the current footer height to only call modalBase
-     * when there is a change in footer height
-     * @private
-     */
-    hasFooterHeightChanged() {
-        // note: calling this.footerHeight updates this.footerHeightTracked
-        // order of values checked here is required
-        const previousRenderedHeight = this.footerHeightTracked;
-        const currentRenderedHeight = this.footerHeight;
-        return currentRenderedHeight !== previousRenderedHeight;
-    }
-
-    /**
-     * On first render, provide a quick means of updating modalBase,
-     * if the modalFooter height changes.
-     * In rare cases, the height of the footer between the
-     * normal or full size rendering can change depending on
-     * content of footer and window width
-     * @private
-     */
-    scheduleFooterHeightCheck() {
-        if (this.initialRender && this.timeoutId === 0) {
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            this.timeoutId = setInterval(() => {
-                if (this.footerHeightChecked >= MAX_HEIGHT_CHECKS) {
-                    clearTimeout(this.timeoutId);
-                    this.timeoutId = 0;
-                    this.footerHeightChecked = 0;
-                } else {
-                    this.footerHeightChecked++;
-                    if (this.hasFooterHeightChanged()) {
-                        this.registerWithParent();
-                    }
-                }
-            }, SIZE_CHECK_TIMER);
-        }
-    }
-
     /**
      * When modal footer is being created, initialize
      * private tracked modal footer state
@@ -205,9 +137,6 @@ export default class LightningModalFooter extends LightningElement {
         this.initialSlotRender = true;
         this.hideFooter = false;
         this.unregisterCallback = null;
-        this.footerHeightTracked = 0;
-        this.footerHeightChecked = 0;
-        this.timeoutId = 0;
     }
 
     connectedCallback() {
@@ -220,15 +149,11 @@ export default class LightningModalFooter extends LightningElement {
         if (this.unregisterCallback) {
             this.unregisterCallback();
         }
-        clearTimeout(this.timeoutId);
-        this.timeoutId = 0;
-        this.footerHeightChecked = 0;
     }
 
     renderedCallback() {
         if (this.initialRender) {
             this.registerWithParent();
-            this.scheduleFooterHeightCheck();
             this.initialRender = false;
         }
         this.hideFooter = !this.isDefaultSlotPopulated;

package/src/lightning/modalHeader/__docs__/modalHeader.md

@@ -13,7 +13,7 @@ tags, which are the only HTML elements permitted. If the header text is too long
 
 This sample code shows the expected order of the modal components. The modal content is
 created in a separate component extended from `LightningModal`. See
-[Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
+[Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/)
 
 ```html
 <!-- my/modalDialog.html -->
@@ -51,7 +51,7 @@ For example, specify the background color on the button using the `sds-c-modal-h
 
 See the modal blueprint's [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 
@@ -61,4 +61,4 @@ If you don't use `lightning-modal-header`, the accessible label is provided usin
 When the modal opens, focus goes to the first interactive element in the modal. If the header includes a link in tagline text, the link
 gets initial focus.
 
-See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.
+See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.

package/src/lightning/modalHeader/modalHeader.js

@@ -7,12 +7,6 @@ const modalHeaderSelector = '.slds-modal__header';
 const labelSelector = '[data-label]';
 const slotWrapperSelector = '[data-slot-wrapper]';
 const defaultSlotSelector = '[data-default-slot]';
-// timeout header height check
-// checking quickly yields faster resolution of footer placement
-const SIZE_CHECK_TIMER = 50;
-// limited to 4 quick checks totalling 200 ms, which catches
-// any misreported heights based on reflow of content
-const MAX_HEIGHT_CHECKS = 4;
 
 /**
  * Creates a header to display the heading and tagline at the top of a modal.
@@ -22,9 +16,6 @@ export default class LightningModalHeader extends LightningElement {
     initialRender = true;
     initialSlotRender = true;
     unregisterCallback = null;
-    headerHeightTracked = 0;
-    headerHeightChecked = 0;
-    timeoutId = 0;
 
     /**
      * Text to display as the heading at the top of the modal
@@ -54,7 +45,6 @@ export default class LightningModalHeader extends LightningElement {
         const headerRect = divElem ? divElem.getBoundingClientRect() : {};
         const { height } = headerRect;
         const heightValue = height || 0;
-        this.headerHeightTracked = heightValue;
         return heightValue;
     }
 
@@ -155,18 +145,6 @@ export default class LightningModalHeader extends LightningElement {
         return (this.label && this.label.trim().length > 0) || false;
     }
 
-    /**
-     * if not the intial render, check for header height chnage,
-     * when a window resize occurs
-     * @returns {Object}
-     * @private
-     */
-    handleModalHeaderResizeCheck() {
-        return !this.initialRender && this.hasHeaderHeightChanged()
-            ? { changed: true, value: this.headerHeightTracked }
-            : { changed: false, value: null };
-    }
-
     /**
      * Register modalHeader with modal parent, including callbacks to
      * unregister the modal header
@@ -185,8 +163,6 @@ export default class LightningModalHeader extends LightningElement {
                 defaultSlotWrapperId: this.defaultSlotWrapperId,
                 defaultSlotIsPopulated: this.isDefaultSlotPopulated,
                 defaultSlotHasRendered: !this.initialSlotRender,
-                checkHeaderHeightCallback:
-                    this.handleModalHeaderResizeCheck.bind(this),
                 unRegisterCallback: (unregisterCallback) => {
                     this.unregisterCallback = unregisterCallback;
                 },
@@ -197,46 +173,6 @@ export default class LightningModalHeader extends LightningElement {
         this.dispatchEvent(evtRegister);
     }
 
-    /**
-     * Provide a means to check whether the tracked header height
-     * is different than the current header height to only call modalBase
-     * when there is a change in header height
-     * @private
-     */
-    hasHeaderHeightChanged() {
-        // note: calling this.headerHeight updates this.headerHeightTracked
-        // order of values checked here is required
-        const previousRenderedHeight = this.headerHeightTracked;
-        const currentRenderedHeight = this.headerHeight;
-        return currentRenderedHeight !== previousRenderedHeight;
-    }
-
-    /**
-     * On first render, provide a quick means of updating modalBase,
-     * if the modalHeader height changes.
-     * In rare cases, the height of the header between the
-     * normal or full size rendering can change depending on
-     * content within the header and the window width
-     * @private
-     */
-    scheduleHeaderHeightCheck() {
-        if (this.initialRender && this.timeoutId === 0) {
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            this.timeoutId = setInterval(() => {
-                if (this.headerHeightChecked >= MAX_HEIGHT_CHECKS) {
-                    clearTimeout(this.timeoutId);
-                    this.timeoutId = 0;
-                    this.headerHeightChecked = 0;
-                } else {
-                    this.headerHeightChecked++;
-                    if (this.hasHeaderHeightChanged()) {
-                        this.registerWithParent();
-                    }
-                }
-            }, SIZE_CHECK_TIMER);
-        }
-    }
-
     /**
      * When modal header is being created, initialize
      * private tracked modal header state
@@ -248,9 +184,6 @@ export default class LightningModalHeader extends LightningElement {
         this.initialRender = true;
         this.initialSlotRender = true;
         this.unregisterCallback = null;
-        this.headerHeightTracked = 0;
-        this.headerHeightChecked = 0;
-        this.timeoutId = 0;
     }
 
     connectedCallback() {
@@ -260,7 +193,6 @@ export default class LightningModalHeader extends LightningElement {
     renderedCallback() {
         if (this.initialRender) {
             this.registerWithParent();
-            this.scheduleHeaderHeightCheck();
             this.initialRender = false;
         }
     }

package/src/lightning/navigation/__docs__/navigation.md

@@ -12,7 +12,7 @@ import { CurrentPageReference } from 'lightning/navigation';
 pageRef;
 ```
 
-The key-value pairs of the PageReference `state` property are serialized to URL query parameters. To create a deep link that describes the page and that a user can bookmark, update the `state` property. See [Change Page State](docs/component-library/documentation/lwc/lwc.use_navigate#events_navigate__page_state).
+The key-value pairs of the PageReference `state` property are serialized to URL query parameters. To create a deep link that describes the page and that a user can bookmark, update the `state` property. See [Add Query Parameters](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate-add-params-url).
 
 #### NavigationMixin
 
@@ -73,6 +73,6 @@ For a recipe that uses `lightning/navigation`, see the `c-nav-to-*` components i
 
 #### See Also
 
-[Navigate to Pages](docs/component-library/documentation/lwc/lwc.use_navigate)
+[Navigate to Pages](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate)
 
-[PageReference Types](docs/component-library/documentation/lwc/lwc.reference_page_reference_type)
+[PageReference Types](https://developer.salesforce.com/docs/platform/lwc/guide/reference-page-reference-type)

package/src/lightning/pill/__docs__/pill.md

@@ -171,7 +171,7 @@ Additionally, the remove button contains customizable elements similar to `light
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/pills/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 To understand how we implemented SLDS in `lightning-pill`, see the **Source Code** section.
 
@@ -184,7 +184,7 @@ To create more than one pill, use the `lightning-pill-container` component, whic
 Specifying a target to change where the link should open is not supported. The link opens on the same tab or window. To create a URL that navigates to another page in Salesforce, use
 [`lightning-navigation`](bundle/lightning-navigation/documentation).
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 

package/src/lightning/pill/avatar.slds.css

@@ -8,39 +8,39 @@
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -50,15 +50,15 @@
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -154,7 +154,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
@@ -172,6 +172,11 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
+  /* re-assign icon color hook for avatar */
+  :host([data-render-mode="shadow"]) {
+    --sds-c-icon-color-background: var(--slds-c-avatar-color-background);
+  }
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -242,19 +247,13 @@
   :host([data-render-mode="shadow"]) .slds-avatar__initials {
     display: flex;
     justify-content: center;
-    -ms-flex-line-pack: center;
     align-content: center;
     align-items: center;
     margin: auto;
     color: var(--slds-c-avatar-text-color);
     height: 100%;
-    text-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    background-color: var(
-      --slds-c-avatar-color-background,
-      var(--sds-c-icon-color-background, var(--sds-g-color-brand-base-50, #0176d3))
-    );
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
+    background-color: var(--slds-c-avatar-color-background, var(--sds-g-color-brand-base-50, #0176d3));
   }
 
   :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {

package/src/lightning/pill/pill.slds.css

@@ -1,15 +1,23 @@
 
 @supports (--styling-hooks: '') {
+    /* re-assign current slds hooks using deprecated naming conventions */
+    :host([data-render-mode="shadow"]) {
+      --slds-c-pill-spacing-block-end: var(--slds-c-pill-spacing-blockend);
+      --slds-c-pill-spacing-block-start: var(--slds-c-pill-spacing-blockstart);
+      --slds-c-pill-spacing-inline-end: var(--slds-c-pill-spacing-inlineend);
+      --slds-c-pill-spacing-inline-start: var(--slds-c-pill-spacing-inlinestart);
+    }
+
   :host([data-render-mode="shadow"]) .slds-pill {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     line-height: var(--sds-g-font-lineheight-4, 1.5);
     max-width: 100%;
-    padding-block-start: var(--slds-c-pill-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inline-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pill-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
     border-width: var(--slds-c-pill-sizing-border, var(--sds-g-sizing-border-1, 1px));
     border-style: solid;
     border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
@@ -43,7 +51,7 @@
     text-decoration: none;
     color:var(--sds-g-color-brand-base-30, #014486);
   }
-  
+
   :host([data-render-mode="shadow"]) a:active{
     color:var(--sds-g-color-brand-base-30, #014486);
   }
@@ -133,10 +141,10 @@
   }
 
   :host([data-render-mode="shadow"]) .slds-pill__action {
-    padding-block-start: var(--slds-c-pill-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inline-end, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
-    padding-block-end: var(--slds-c-pill-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
     border-width: var(--slds-c-pill-sizing-border, 1px);
     border-style: solid;
     border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));

package/src/lightning/pillContainer/__docs__/pillContainer.md

@@ -249,7 +249,7 @@ Custom properties for pill containers work only with particular `lightning-pill-
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/pills/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 To understand how we implemented SLDS in `lightning-pill-container`, see the **Source Code** section.
 

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

@@ -1,11 +1,5 @@
 
  @supports (--styling-hooks: '') {
-   :host([data-render-mode="shadow"]) [part~='listbox'] {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     --_listbox-spacing-xxx-small: 0.125rem;
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-   }
-
    /* Horizontal listbox - used for pill container */
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
      display: inline-flex;
@@ -18,9 +12,7 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-inline-start: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline-start: 0.125rem;
    }
 
    /* Vertical listbox */
@@ -101,7 +93,7 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
-     color: currentColor;
+     color: currentcolor;
    }
 
    /* The icon within a plain listbox that indicates if an option has been selected or not. */
@@ -126,9 +118,7 @@
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
-      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     margin-block-end: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     margin-block-end: 0.125rem;
    }
 
    /* The metadata or secondary text of an entity listbox */
@@ -139,15 +129,15 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
-     color: currentColor;
+     color: currentcolor;
    }
-  
+
    /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
 
    /* ---------------------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;
@@ -165,18 +155,14 @@
 
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
      padding-block-start: 0;
-      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-block-end: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-end: 0.125rem;
      padding-inline: 0;
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-block-start: var(--_listbox-spacing-xxx-small);
+     padding-block-start: 0.125rem;
      padding-block-end: 0;
-     padding-inline: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline: 0.125rem;
    }
 
    /* Toggle button to show all of the pill selections */
@@ -251,7 +237,7 @@
      margin-inline-end: 0;
    }
 
-   @media (max-width: 48em) {
+   @media (width <= 48em) {
 
      :host([data-render-mode="shadow"]) .slds-media_responsive {
        display: block;
@@ -264,4 +250,3 @@
      }
    }
  }
- 

package/src/lightning/pillContainer/pill-container.slds.css

@@ -1,18 +1,29 @@
 
  @supports (--styling-hooks: '') {
+  /* re-assign current slds hooks using deprecated naming conventions */
+  :host([data-render-mode="shadow"]) {
+    --slds-c-pill-container-color-background: var(--slds-c-pillcontainer-color-background);
+    --slds-c-pill-container-spacing-block-end: var(--slds-c-pillcontainer-spacing-blockend);
+    --slds-c-pill-container-spacing-block-start: var(--slds-c-pillcontainer-spacing-blockstart);
+    --slds-c-pill-container-spacing-inline-end: var(--slds-c-pillcontainer-spacing-inlineend);
+    --slds-c-pill-container-spacing-inline-start: var(--slds-c-pillcontainer-spacing-inlinestart);
+    --slds-c-pill-sizing-border: var(--slds-c-pillcontainer-sizing-border);
+    --slds-c-pill-color-border: var(--slds-c-pillcontainer-color-border);
+    --slds-c-pill-radius-border: var(--slds-c-pillcontainer-radius-border);
+  }
 
   :host([data-render-mode="shadow"]) .slds-pill_container {
     display: flex;
     min-height: calc(calc((var(--sds-g-sizing-1, 0.125rem) * 3) + var(--sds-g-sizing-7, 1.5rem)) + 2px);
-    padding-block-start: var(--slds-c-pill-container-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-container-spacing-inline-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pill-container-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-container-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    border-width: var(--slds-c-pill-sizing-border, var(--sds-g-sizing-border-1, 1px));
+    padding-block-start: var(--slds-c-pillcontainer-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pillcontainer-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-end: var(--slds-c-pillcontainer-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pillcontainer-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    border-width: var(--slds-c-pillcontainer-sizing-border, var(--sds-g-sizing-border-1, 1px));
     border-style: solid;
-    border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    background-color: var(--slds-c-pill-container-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    border-color: var(--slds-c-pillcontainer-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
+    border-radius: var(--slds-c-pillcontainer-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    background-color: var(--slds-c-pillcontainer-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
   }
 
   :host([data-render-mode="shadow"]) .slds-pill_container .slds-listbox_inline {