lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/pill/pill.js

@@ -4,12 +4,14 @@ import labelPillRemove from '@salesforce/label/LightningPill.remove';
 import labelPillWarning from '@salesforce/label/LightningPill.warning';
 import labelPillDeleteAndNavigate from '@salesforce/label/LightningPill.deleteAndNavigate';
 import formFactor from '@salesforce/client/formFactor';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     keyCodes,
     classListMutation,
     normalizeBoolean,
     makeAbsoluteUrl,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import link from './link.html';
 import plain from './plain.html';
@@ -46,7 +48,7 @@ function modifyAttribute(el, name, value) {
  * A pill displays a label that can contain links and can be removed from view.
  * @slot default Placeholder for an image, such as an icon or avatar.
  */
-export default class LightningPill extends LightningElement {
+export default class LightningPill extends LightningShadowBaseClass {
     /**
      * The URL of the page that the link goes to.
      * @type {string}
@@ -76,6 +78,14 @@ export default class LightningPill extends LightningElement {
      */
     @api name;
 
+    @track _role;
+    @track _ariaSelected;
+    @track _hasMedia = true;
+    @track _hasError;
+    @track _tabIndex;
+    @track _standardContainer;
+    @track _variant;
+
     /**
      * The variant changes the appearance of the pill.
      * Accepted variants include link, plain, and plainLink.
@@ -85,14 +95,23 @@ export default class LightningPill extends LightningElement {
      * @type {string}
      * @default link
      */
-    @api variant = VARIANT.LINK;
+    //@api variant = VARIANT.LINK;
+    @api
+    get variant() {
+        return this._variant || VARIANT.LINK;
+    }
 
-    @track _role;
-    @track _ariaSelected;
-    @track _hasMedia = true;
-    @track _hasError;
-    @track _tabIndex;
-    @track _standardContainer;
+    set variant(value) {
+        // work around for verification of accepted variants as normalizeString method does not
+        // account for camel case attribute values.
+        let acceptedValues = [VARIANT.LINK, VARIANT.PLAIN, VARIANT.PLAIN_LINK];
+        if (acceptedValues.indexOf(value) !== -1) {
+            this._variant = value;
+        } else {
+            this._variant = VARIANT.LINK;
+        }
+        reflectAttribute(this, 'variant', this._variant);
+    }
 
     _connected = false;
     _dispatcher = () => {};
@@ -250,6 +269,7 @@ export default class LightningPill extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         if (this.isPlainLink || this.isLink) {
             this.updateLinkInfo(this.href);

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

@@ -0,0 +1,168 @@
+
+@supports (--styling-hooks: '') {
+  :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));
+    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));
+    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-spacing-1, 0.25rem));
+    background-color: var(--slds-c-pill-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    box-shadow: var(--slds-c-pill-shadow);
+    position: relative;
+    min-height: calc(var(--sds-g-sizing-7, 1.5rem) + var(--sds-g-sizing-1, 0.125rem));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill + .slds-pill {
+    margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill:hover {
+    --slds-c-pill-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill:focus {
+    outline: 0;
+    --slds-c-pill-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
+    --slds-c-pill-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+  }
+
+ :host([data-render-mode="shadow"]) a {
+    text-decoration: none;
+    color: var(--sds-g-color-brand-base-50, #0176d3);
+  }
+
+  :host([data-render-mode="shadow"]) a:hover,:host([data-render-mode="shadow"])  a:focus{
+    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);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_bare {
+    --slds-c-pill-color-background: transparent;
+    --slds-c-pill-sizing-border: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_bare:hover {
+    --slds-c-pill-color-background-: transparent;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__label:focus {
+    outline: 0;
+    border-radius: var(--sds-g-radius-border-2, 0.25rem);
+    box-shadow: var(--slds-c-pill-label-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__icon,:host([data-render-mode="shadow"]) 
+  .slds-pill__icon_container {
+    width: var(--sds-g-sizing-6, 1.25rem);
+    height: var(--sds-g-sizing-6, 1.25rem);
+    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill ::slotted(*) {
+    --slds-c-avatar-sizing: var(--sds-g-sizing-6, 1.25rem);
+    --slds-c-icon-sizing: calc(var(--sds-g-sizing-6, 1.25rem) - var(--sds-g-sizing-border-2, 2px));
+
+    color: var(--slds-c-pill-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+    display: block;
+    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__icon ~ .slds-pill__action,:host([data-render-mode="shadow"]) 
+  .slds-pill__icon_container ~ .slds-pill__action {
+    padding-inline-start: calc(var(--sds-g-spacing-5, 1.5rem) + 2px);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__remove {
+    width: var(--sds-g-sizing-5, 1rem);
+    height: var(--sds-g-sizing-5, 1rem);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: var(--sds-g-sizing-2, 0.25rem);
+    border-radius: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__remove svg {
+    width: calc(var(--sds-g-sizing-1, 0.125rem) * 3);
+    height: calc(var(--sds-g-sizing-1, 0.125rem) * 3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_link {
+    border: 0;
+    padding: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__icon_container {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    transform: translateY(-50%);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__remove {
+    position: absolute;
+    top: 50%;
+    right: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    transform: translateY(-50%);
+  }
+
+  :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));
+    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));
+    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__action:focus {
+    outline: 0;
+    border-color: var(--slds-c-pill-action-color-border, var(--sds-g-color-brand-base-60, #1b96ff));
+    box-shadow: var(--slds-c-pill-action-shadow, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-has-error {
+    border-color: var(--slds-c-pill-error-color-border, var(--sds-g-color-error-base-50, #ea001e));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-has-error:active {
+    border-color: var(--slds-c-pill-error-color-border-active, var(--sds-g-color-error-base-50, #ea001e));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-has-error .slds-pill__label {
+    font-weight: var(--sds-g-font-weight-7, 700);
+    color: var(--sds-g-color-error-base-50, #ea001e);
+  }
+}

package/src/lightning/pill/plain.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './pill.slds.css';
+@import './avatar.slds.css';

package/src/lightning/pill/plain.html

@@ -1,5 +1,5 @@
 <template>
-    <span>
+    <span part="pill">
         <template if:true={_hasMedia}>
             <span class="slds-pill__icon_container">
                 <slot></slot>

package/src/lightning/pill/plainLink.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './pill.slds.css';
+@import './avatar.slds.css';

package/src/lightning/pill/plainLink.html

@@ -1,5 +1,5 @@
 <template>
-    <span>
+    <span part="pill">
         <template if:true={_hasMedia}>
             <span class="slds-pill__icon_container">
                 <slot></slot>

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

@@ -11,9 +11,9 @@ selections when filtering a list, such as from a multi-select picklist.
 
 `lightning-pill-container` displays a pill using the `lightning-pill` component, which can display an icon or avatar next to the text label.
 
-To specify the pills, set the `items` attribute to an array of values in your component's JavaScript. 
+To specify the pills, set the `items` attribute to an array of values in your component's JavaScript.
 
-By default, all pills in the container are displayed and wrap to additional lines if they can't fit on one line. 
+By default, all pills in the container are displayed and wrap to additional lines if they can't fit on one line.
 For information about changing the behavior, see **Managing Pill Layout in the Container**.
 
 This example creates three pills: a text-only pill, a pill with an avatar, and
@@ -131,7 +131,7 @@ export default class PillContainerRemoveExample extends LightningElement {
 Several boolean attributes let you control the layout of pills in the container. These attributes are
 set to false by default, which makes all pills display and wrap to multiple lines.
 
-- `is-collapsible`: Determines whether the list of pills can be expanded and collapsed. If `is-collapsible` is true, `is-expanded` can determine whether a pill list displays all the pills or one line of pills. If `is-collapsible` is false or not specified, the `is-expanded` attribute has no effect regardless of its value. 
+- `is-collapsible`: Determines whether the list of pills can be expanded and collapsed. If `is-collapsible` is true, `is-expanded` can determine whether a pill list displays all the pills or one line of pills. If `is-collapsible` is false or not specified, the `is-expanded` attribute has no effect regardless of its value.
 - `is-expanded`: Determines whether the full list of pills is shown. Set `is-collapsible` to true if you want to set `is-expanded` to expand and collapse the list. If you set `is-expanded` to false and don't set `is-collapsible` to true, the list is expanded.
 - `single-line`: Specifies that the pill container can display one line of pills. By default, if pills can't fit on one line, they are wrapped to additional lines to fit the container. Set `single-line` to true to limit pill display to one line. This attribute overrides `is-collapsible` and `is-expanded`.
 
@@ -156,11 +156,11 @@ This example sets `is-collapsible` and uses a button to change the value of `is-
             >
             </lightning-pill-container>
     </div>
-    <lightning-button onclick={setExpanded} label="Expand and Collapse"></lightning-button> 
+    <lightning-button onclick={setExpanded} label="Expand and Collapse"></lightning-button>
 </template>
 ```
 
-The list of pills is initially collapsed. The button expands and collapses the list. 
+The list of pills is initially collapsed. The button expands and collapses the list.
 
 ```javascript
 import { LightningElement } from 'lwc';
@@ -173,7 +173,7 @@ export default class PillContainerCanCollapse extends LightningElement {
     }
 
     items = [
-        { 
+        {
         //define the pills
         }
     ];
@@ -213,7 +213,7 @@ handlePillExpansion(){
 }
 
     items = [
-        { 
+        {
         //define the pills
         }
     ];
@@ -234,18 +234,18 @@ To apply additional styling, use the SLDS [utility classes](https://www.lightnin
 
 To apply custom styling, use the `:host` selector or define a custom class using the `class` attribute. Use SLDS styling hooks to customize the component's styles.
 
-`lightning-pill-container` renders pills using `lightning-pill`. Use the `--sds-c-pill-*` custom properties on `lightning-pill`.
+`lightning-pill-container` renders pills using `lightning-pill`. Use the `--slds-c-pill-*` custom properties on `lightning-pill`.
 
 Custom properties for pill containers work only with particular `lightning-pill-container` variants for the remove button.
 
 | CSS Custom Property                     | `lightning-pill-container` Variants |
 | --------------------------------------- | ----------------------------------- |
-| `--sds-c-icon-color-background`         | `standard` (default)                |
-| `--sds-c-icon-color-foreground-default` | `standard` (default)                |
-| `--sds-c-button-color-background`       | `bare`                              |
-| `--sds-c-button-color-border`           | `bare`                              |
-| `--sds-c-button-radius-border`          | `bare`                              |
-| `--sds-c-button-sizing-border`          | `bare`                              |
+| `--slds-c-icon-color-background`         | `standard` (default)                |
+| `--slds-c-icon-color-foreground-default` | `standard` (default)                |
+| `--slds-c-button-color-background`       | `bare`                              |
+| `--slds-c-button-color-border`           | `bare`                              |
+| `--slds-c-button-radius-border`          | `bare`                              |
+| `--slds-c-button-sizing-border`          | `bare`                              |
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/pills/#Styling-Hooks-Overview) for a list of CSS custom properties.
 

package/src/lightning/pillContainer/barePillContainer.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './pill.slds.css';
+@import './pill-container.slds.css';

package/src/lightning/pillContainer/barePillContainer.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={computedWrapperClass}>
+    <div class={computedWrapperClass} part="listbox pill-container">
         <template if:true={_showMore}>
             <span class="slds-listbox-toggle" aria-hidden="true">
                 <button class="slds-button" tabindex="-1" onclick={handleMoreClick}>
@@ -33,7 +33,6 @@
                                     fallback-icon-name={pillViewModel.pill.item.fallbackIconName}
                                     variant={pillViewModel.pill.item.variant}
                                     size="x-small"
-                                    class="slds-icon_container"
                                     alternative-text={pillViewModel.pill.item.alternativeText}>
                     </lightning-avatar>
                 </template>

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

@@ -0,0 +1,267 @@
+
+ @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;
+     flex-wrap: wrap;
+     align-items: center;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
+     display: flex;
+   }
+
+   :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 */
+   }
+
+   /* Vertical listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+   .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
+   .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+     background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+     text-decoration: none;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
+   .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
+     background-color: transparent;
+     cursor: default;
+   }
+
+   /* Modifies the listbox option if it contains an entity object */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
+     padding-block: var(--sds-g-spacing-1, 0.25rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   /* Modifies the listbox option if it contains a plain object or string */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+     padding-block: var(--sds-g-spacing-2, 0.5rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+     padding-block: var(--sds-g-spacing-2, 0.5rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   /* Choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+     cursor: pointer;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+     outline: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
+     color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+   }
+
+   /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
+
+   /* the _vertical variations only apply to combobox's */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+   }
+
+   /* If the listbox option has metadata or secondary information that sits below its primary text */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
+     margin-block-start: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+     display: inline-block;
+     vertical-align: middle;
+   }
+
+   /* Header for choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-header {
+     font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+     font-weight: 700;
+   }
+
+   /* Container for listbox option icon */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+     width: var(--sds-g-sizing-7, 1.5rem);
+     display: inline-flex;
+     align-content: center;
+     align-items: center;
+     justify-content: center;
+     color: var(--sds-g-color-neutral-base-50, #747474);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
+     color: currentColor;
+   }
+
+   /* The icon within a plain listbox that indicates if an option has been selected or not. */
+   :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
+     opacity: 0;
+     fill: var(--sds-g-color-brand-base-50, #0176d3);
+   }
+
+   /* Modifier that makes selected icon visible */
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+     opacity: 1;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
+     color: var(--sds-g-color-brand-base-50, #0176d3);
+   }
+
+   /* The main text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
+     max-width: 100%;
+     overflow: hidden;
+     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 */
+   }
+
+   /* The metadata or secondary text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+     display: block;
+     margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+     color: var(--sds-g-color-neutral-base-30, #444444);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
+     color: currentColor;
+   }
+  
+   /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
+
+   /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
+
+   /* 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;
+     padding: 0;
+     padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) + var(--sds-g-spacing-3, 0.75rem));
+     height: 1.875rem;
+     overflow: hidden;
+   }
+
+   /* Expanded state of a selection group */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+     height: auto;
+     padding: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
+     padding-block-start: 0;
+      /* 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-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-end: 0;
+     padding-inline: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Toggle button to show all of the pill selections */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+     position: absolute;
+     top: 50%;
+     transform: translateY(-50%);
+     right: var(--sds-g-spacing-2, 0.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
+     line-height: 1;
+   }
+
+   /* Media Object classes need to be pulled out for reusability */
+   :host([data-render-mode="shadow"]) .slds-media {
+     display: flex;
+     align-items: flex-start;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure {
+     flex-shrink: 0;
+     margin-inline-end: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+     min-width: var(--sds-g-sizing-10, 3rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__body {
+     flex: 1;
+     min-width: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
+   .slds-media__body> :last-child {
+     margin-block-end: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media-body-iefix {
+     flex-shrink: 0;
+     flex-basis: auto;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+     margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-5, 1.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+     margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
+     flex: 0 1 auto;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_center {
+     align-items: center;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
+     margin-block: 0;
+     margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+     margin-inline-end: 0;
+   }
+
+   @media (max-width: 48em) {
+
+     :host([data-render-mode="shadow"]) .slds-media_responsive {
+       display: block;
+     }
+
+     :host([data-render-mode="shadow"]) .slds-media_responsive .slds-media__figure {
+       margin-block: 0;
+       margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+       margin-inline-end: 0;
+     }
+   }
+ }
+ 

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

@@ -0,0 +1,22 @@
+
+ @supports (--styling-hooks: '') {
+
+  :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));
+    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));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_container .slds-listbox_inline {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
+ }