lightning-base-components 1.18.1-alpha → 1.18.2-alpha

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/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;
+  }
+ }

package/src/lightning/pillContainer/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/pillContainer/pillContainer.js

@@ -1,11 +1,13 @@
 import labelContainerLabel from '@salesforce/label/LightningPillContainer.label';
 import pillContainerMoreLabel from '@salesforce/label/LightningPillContainer.more';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import LightningPillItem from './pillItem';
 import {
     keyCodes,
     normalizeBoolean,
     normalizeString,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import { LightningResizeObserver } from 'lightning/resizeObserver';
 import formFactor from '@salesforce/client/formFactor';
@@ -23,7 +25,7 @@ const i18n = {
 /**
  * A list of pills grouped in a container. This component requires API version 42.0 and later.
  */
-export default class LightningPillContainer extends LightningElement {
+export default class LightningPillContainer extends LightningShadowBaseClass {
     /**
      * Aria label for the pill container to describe the list of options.
      * @type {string}
@@ -40,6 +42,7 @@ export default class LightningPillContainer extends LightningElement {
     @track _pillContainerElementId;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
     }
 
@@ -119,7 +122,7 @@ export default class LightningPillContainer extends LightningElement {
      */
     @api
     get variant() {
-        return this._variant || 'standard';
+        return this._variant || STANDARD;
     }
 
     set variant(value) {
@@ -127,6 +130,7 @@ export default class LightningPillContainer extends LightningElement {
             fallbackValue: STANDARD,
             validValues: [STANDARD, BARE],
         });
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     /**

package/src/lightning/pillContainer/standardPillContainer.css

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

package/src/lightning/pillContainer/standardPillContainer.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}>{computedPillCountMoreLabel}</button></span>
         </template>
@@ -10,6 +10,7 @@
             aria-orientation="horizontal"
             onclick={handleClick}
             onkeydown={handleKeyDown}
+            part="listbox"
         >
             <template for:each={pillViewModels} for:item="pillViewModel" for:index="index">
                 <li key={pillViewModel.pill.item.label} class="slds-listbox-item" role="presentation">
@@ -36,7 +37,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>