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

package/src/lightning/modal/__modalUtils__/modalContainerTestMockData.js

@@ -0,0 +1,131 @@
+/* Contains mock data for modal testing */
+
+const formData = [
+    {
+        name: 'assignedTo',
+        value: 'Jonathan Marks',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'teamName',
+        value: 'Chrome Webdrivers',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'statusValue',
+        value: 'New',
+        result: 'new',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'personalSettings',
+        value: 'Updated',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'slaSerialNum',
+        value: '8675997511',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'slaExpireDate',
+        value: 'Sep 8, 2021',
+        result: '2021-09-08',
+        type: 'datepicker',
+        numTabsToNext: 2,
+    },
+    {
+        name: 'slaExpireTime',
+        value: 8,
+        result: '02:00:00.000',
+        type: 'timepicker',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'location',
+        value: 'Downtown Offices',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'selectedLangs',
+        value: 'English, Spanish, Chinese',
+        type: 'text',
+        numTabsToNext: 2,
+    },
+
+    {
+        name: 'addressBilling.country',
+        value: 3,
+        result: 'SP',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressBilling.street',
+        value: '32184 Excellent Street',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressBilling.city',
+        value: 'Lowertown',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressBilling.province',
+        value: 4,
+        result: 'GO',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressBilling.postalCode',
+        value: '8K2J3P1',
+        type: 'text',
+        numTabsToNext: 2,
+    },
+
+    {
+        name: 'addressShipping.country',
+        value: 2,
+        result: 'CN',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressShipping.street',
+        value: '32342 Postland Avenue',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressShipping.city',
+        value: 'Uppertown',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressShipping.province',
+        value: 2,
+        result: 'GX',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressShipping.postalCode',
+        value: '8782399-219',
+        type: 'text',
+        numTabsToNext: 0,
+    },
+];
+
+module.exports = {
+    formData,
+};

package/src/lightning/modal/modal.js

@@ -16,7 +16,7 @@ export default class LightningModal extends LightningOverlay {
 
     // public api
     /**
-     * How much of the viewport width the modal uses. Supported values are small, medium, or large.
+     * How much of the viewport width the modal uses. Supported values are small, medium, large, or full.
      * @type {string}
      * @default medium
      */

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

@@ -0,0 +1,272 @@
+/**
+ * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
+ *        fallbacks, styles will regress due to invalid CSS variables from
+ *        missing SLDS shared and globals.
+ *
+ *        Additionally, LBC are currently relying on 'part' attributes to
+ *        receive styling. Authoring styles that rely on slots is not recommended.
+ */
+
+@supports (--styling-hooks: '') {
+  :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']) {
+    --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']) {
+    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
+  }
+
+  :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']) {
+    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
+  }
+
+  :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']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
+  }
+
+  :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']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='boundary'] {
+    /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
+    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    --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,
+      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-inline-start: var(
+      --slds-c-icon-spacing-inline-start,
+      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));
+
+    /**
+     * There's a divergence in LBC that we have to support here: LBC splits their
+     * icon implementation into two components: lightning-icon and lightning-primitive-icon.
+     * slds-icon is consumed within both with no issues except that the presence of an
+     * additional custom element (primitive-icon) creates an unexpected inline-level
+     * element and breaks our formatting context. tl;dr, we have to reset the formatting
+     * context of the boundary or else we'll inherit line-height from an ancestor and
+     * get visual regressions.
+     *
+     * If lightning-icon is refactored into a single component, this line can be removed.
+     */
+    display: inline-flex;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='icon'] {
+    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
+    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
+    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
+  }
+
+  :host([data-render-mode="shadow"][icon-name*='action']) {
+    --slds-c-icon-spacing-block: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-spacing-inline: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-radius-border: calc(var(--sds-g-radius-border-circle, 100%) / 2);
+  }
+}
+
+/**
+ * P R I V A T E
+ *
+ * The following styling is implemented by classes within the shadow DOM.
+ * They're expected to be private to the component and not for external use.
+ *
+ * See notes for each class for the rationale behind their inclusion.
+ */
+
+/**
+ * Utility icons traditionally added a class to change the default foreground
+ * color (white) to a grey. This was done implicitly whereas other color changes
+ * were done explicitly through the 'variant' attribute. So this is an outlier
+ * to the overall pattern. Leaving it as-is since an update would require an
+ * API change or more investigating.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * outcome is the removal of this class and the default utility styling would
+ * be implemented through an attribute or some other class-less solution.
+ */
+
+:host([data-render-mode="shadow"]) .slds-icon-text-default {
+  /*! @css-var-fallback fill */
+  --slds-c-icon-color-foreground: var(
+    --slds-c-icon-color-foreground-default,
+    var(--sds-c-icon-color-foreground-default, var(
+      --sds-g-color-neutral-base-50, #747474))
+  );
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
+  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
+}
+
+/**
+ * A temporarily baked-in utility class until SLDS gets a proper utility package.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * outcome is the removal of this class and replacing the class with the SLDS
+ * utility package solution.
+ */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+/**
+ * For the initial alpha version, we're hardcoding in the various unique icon styles.
+ *
+ * Next version, we want to dynamically generate these from legacy SLDS with the
+ * following design pattern:
+ *
+ * [type="action"][icon-name="approval"] {
+ *   --sds-c-icon-color-background: var(--slds-c-icon-color-background, #111);
+ * }
+ */
+
+:host([data-render-mode="shadow"]) .slds-icon_disabled {
+  background-color: currentColor;
+}
+
+:host([data-render-mode="shadow"]) .slds-input__icon {
+  --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+  
+  position: absolute;
+  top: 50%;
+  margin-block-start: -0.4375rem;
+  line-height: var(--sds-g-font-lineheight-1, 1);
+  border: 0;
+  z-index: 2;
+}
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='avatar'] {
+    width: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
+    height: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: var(--slds-c-avatar-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    line-height: var(--sds-g-font-lineheight-1, 1);
+    font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+    color: var(--slds-c-avatar-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"][size='x-small']) [part~='avatar'] {
+    width: var(--sds-g-sizing-6, 1.25rem);
+    height: var(--sds-g-sizing-6, 1.25rem);
+    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
+    --slds-c-icon-sizing: var(--sds-g-sizing-6, 1.25rem);
+  }
+
+  :host([data-render-mode="shadow"][size='small']) [part~='avatar'] {
+    width: var(--sds-g-sizing-7, 1.5rem);
+    height: var(--sds-g-sizing-7, 1.5rem);
+    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
+    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
+  }
+
+  :host([data-render-mode="shadow"][size='medium']) [part~='avatar'] {
+    width: var(--sds-g-sizing-9, 2rem);
+    height: var(--sds-g-sizing-9, 2rem);
+    font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+    --slds-c-icon-sizing: var(--sds-g-sizing-9, 2rem);
+  }
+
+  :host([data-render-mode="shadow"][size='large']) [part~='avatar'] {
+    width: var(--sds-g-sizing-10, 3rem);
+    height: var(--sds-g-sizing-10, 3rem);
+    font-size: var(--sds-g-font-scale-1, 1.125rem);
+    line-height: var(--sds-g-font-lineheight-2, 1.25);
+    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
+  }
+
+  :host([data-render-mode="shadow"][variant='circle']) [part~='avatar'] {
+    border-radius: calc(var(--sds-g-radius-border-circle, 100%) / 2);
+  }
+
+  :host([data-render-mode="shadow"].slds-avatar_empty) [part~='avatar'] {
+    border: var(--sds-g-sizing-border-1, 1px) dashed var(--sds-g-color-neutral-base-90, #e5e5e5);
+  }
+
+  :host([data-render-mode="shadow"]) lightning-icon {
+    display: flex;
+    justify-content: center;
+  }
+
+  :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 */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {
+    cursor: default;
+    text-decoration: none;
+  }
+
+  /* inverse is not currently supported by LBC */
+  :host([data-render-mode="shadow"]) .slds-avatar__initials_inverse {
+    --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--sds-g-color-neutral-base-30, #444444));
+
+    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    text-shadow: none;
+  }
+}

package/src/lightning/pill/link.css

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

package/src/lightning/pill/link.html

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

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';