lightning-base-components 1.18.8-ssr → 1.19.2-alpha

package/src/lightning/toastContainer/toast.slds.css

@@ -1,97 +1,103 @@
 
-:host([data-render-mode="shadow"]) .slds-notify_toast {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  background: none;
-  background-color: var(--slds-c-toast-color-background, var(--sds-g-color-neutral-base-50, #747474));
-  color: var(--slds-c-toast-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
-  border-radius: var(--slds-c-toast-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-  margin: var(--sds-g-spacing-2, 0.5rem);
-  padding-block-start: var(--slds-c-toast-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
-  padding-inline-end: var(--slds-c-toast-spacing-inline-end, var(--sds-g-spacing-8, 3rem));
-  padding-block-end: var(--slds-c-toast-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
-  padding-inline-start: var(--slds-c-toast-spacing-inline-start, var(--sds-g-spacing-5, 1.5rem));
-  min-width: var(--slds-c-toast-sizing-min-width, var(--sds-g-sizing-16, 30rem));
-  text-align: left;
-  justify-content: flex-start;
-}
-
-:host([data-render-mode="shadow"]) .slds-notify_toast a {
-  color: currentColor;
-  border: var(--sds-g-sizing-border-1, 1px) solid transparent;
-  border-radius: var(--sds-g-radius-border-2, 0.25rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-notify_toast a:hover,:host([data-render-mode="shadow"]) 
-.slds-notify_toast a:focus {
-  text-decoration: none;
-  outline: 0;
-}
-
-:host([data-render-mode="shadow"]) .slds-notify_toast a:focus {
-  box-shadow: 0 0 3px var(--sds-g-color-neutral-base-95, #f3f3f3);
-  border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-}
-
-:host([data-render-mode="shadow"]) .slds-notify_toast a:active {
-  color: var(--slds-g-color-neutral-100-opacity-50, rgba(255, 255, 255, 0.5));
-}
-
-:host([data-render-mode="shadow"]) .slds-notify_toast a[disabled] {
-  color: var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 0.15));
-}
-
-:host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
-  float: right;
-  position: absolute;
-  top: var(--sds-g-spacing-3, 0.75rem);
-  right: var(--sds-g-spacing-3, 0.75rem);
-  margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
-  transform: translateY(-0.125rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-region_narrow .slds-notify_toast {
-  min-width: auto;
-  width: 100%;
-  margin-inline-start: 0;
-}
-
-/* TODO W-12674349: remove after name-value-list utils are added */
-
-:host([data-render-mode="shadow"]) .slds-list--inline {
-  display: inline-flex;
-  max-width: 100%;
-}
-
-/* TODO W-12674349: remove after assistive text util is added */
-
-: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;
-}
-
-/* TODO W-12674349: remove after text utils are added */
-
-:host([data-render-mode="shadow"]) .slds-text-heading_small {
-  font-size: var(--sds-g-font-size-base, 1rem);
-  line-height: var(--sds-g-font-lineheight-2, 1.25);
-}
-
-/* TODO W-12674349: remove after alert is added */
-
-:host([data-render-mode="shadow"]) .slds-notify__close {
-  position: absolute;
-  top: 50%;
-  right: var(--sds-g-spacing-3, 0.75rem);
-  margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
-  transform: translateY(-50%);
+@supports (--styling-hooks: '') {
+  /* re-assign current slds hooks using deprecated naming conventions */
+  :host([data-render-mode="shadow"]) {
+    --slds-c-toast-spacing-block-end: var(--slds-c-toast-spacing-blockend);
+    --slds-c-toast-spacing-block-start: var(--slds-c-toast-spacing-blockstart);
+    --slds-c-toast-spacing-inline-end: var(--slds-c-toast-spacing-inlineend);
+    --slds-c-toast-spacing-inline-start: var(--slds-c-toast-spacing-inlinestart);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-notify_toast {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    background: none;
+    background-color: var(--slds-c-toast-color-background, var(--sds-g-color-neutral-base-50, #747474));
+    color: var(--slds-c-toast-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+    border-radius: var(--slds-c-toast-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    margin: var(--sds-g-spacing-2, 0.5rem);
+    padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--sds-g-spacing-8, 3rem));
+    padding-block-end: var(--slds-c-toast-spacing-blockend, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--sds-g-spacing-5, 1.5rem));
+    min-width: var(--slds-c-toast-sizing-min-width, var(--sds-g-sizing-16, 30rem));
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-notify_toast a {
+    color: currentcolor;
+    border: var(--sds-g-sizing-border-1, 1px) solid transparent;
+    border-radius: var(--sds-g-radius-border-2, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-notify_toast a:hover,:host([data-render-mode="shadow"]) 
+  .slds-notify_toast a:focus {
+    text-decoration: none;
+    outline: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-notify_toast a:focus {
+    box-shadow: 0 0 3px var(--sds-g-color-neutral-base-95, #f3f3f3);
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-notify_toast a:active {
+    color: var(--slds-g-color-neutral-100-opacity-50, rgba(255, 255, 255, 50%));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-notify_toast a[disabled] {
+    color: var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 15%));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
+    float: right;
+    position: absolute;
+    top: var(--sds-g-spacing-3, 0.75rem);
+    right: var(--sds-g-spacing-3, 0.75rem);
+    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    transform: translateY(-0.125rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-region_narrow .slds-notify_toast {
+    min-width: auto;
+    width: 100%;
+    margin-inline-start: 0;
+  }
+
+  /* TODO W-12674349: remove after name-value-list utils are added */
+  :host([data-render-mode="shadow"]) .slds-list--inline {
+    display: inline-flex;
+    max-width: 100%;
+  }
+
+  /* TODO W-12674349: remove after assistive text util is added */
+  :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;
+  }
+
+  /* TODO W-12674349: remove after text utils are added */
+  :host([data-render-mode="shadow"]) .slds-text-heading_small {
+    font-size: var(--sds-g-font-size-base, 1rem);
+    line-height: var(--sds-g-font-lineheight-2, 1.25);
+  }
+
+  /* TODO W-12674349: remove after alert is added */
+  :host([data-render-mode="shadow"]) .slds-notify__close {
+    position: absolute;
+    top: 50%;
+    right: var(--sds-g-spacing-3, 0.75rem);
+    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    transform: translateY(-50%);
+  }
 }

package/src/lightning/toastContainer/toastContainer.css

@@ -1,7 +1,7 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './toast.slds.css';
 @import 'lightning/sldsUtilsPosition';
-@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsGrid'; */
 
 .top,
 :host([data-render-mode="shadow"]) .top {

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

@@ -2,5 +2,5 @@
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
     <minApiVersion>58.0</minApiVersion>
-    <support>BETA</support>
+    <support>GA</support>
 </LightningComponentBundle>

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -52,6 +52,7 @@ export {
 } from './ariaLevelHeadingUtils.js';
 
 export { isCSR } from './ssr';
+import formFactor from '@salesforce/client/formFactor';
 
 /**
  * @param {HTMLElement} element Element to act on
@@ -272,3 +273,11 @@ export function isNativeComponent(cmp) {
     }
     return false;
 }
+
+/**
+ * Checks if a desktop browser is being used in the enviroment
+ * @returns {Boolean} is a desktop browser being used
+ */
+export function isDesktopBrowser() {
+    return formFactor === 'Large';
+}

package/src/lightning/utilsPrivate/videoUtils.js

@@ -20,6 +20,7 @@ const ALLOWED_DOMAINS = new Set([
     's1.adis.ws',
     'scormanywhere.secure.force.com',
     'appiniummastertrial.secure.force.com',
+    'embed.app.guidde.com',
 ]);
 
 export function hasOnlyAllowedVideoIframes(htmlString) {
@@ -44,5 +45,15 @@ function isUrlAllowed(url) {
     const anchor = document.createElement('a');
     anchor.href = url;
 
-    return anchor.protocol === 'https:' && ALLOWED_DOMAINS.has(anchor.hostname);
+    if (anchor.protocol !== 'https:') {
+        return false;
+    }
+
+    if (anchor.hostname === 'vimeo.com') {
+        const path = anchor.pathname;
+        const regex = /^\/showcase\/\d+\/embed$/;
+        return path.match(regex) !== null;
+    }
+
+    return ALLOWED_DOMAINS.has(anchor.hostname);
 }

package/src/lightning/verticalNavigation/verticalNavigation.css

@@ -1,2 +1,3 @@
-@import 'lightning/sldsCommon';
-@import './vertical-navigation.slds.css';
+/* sldsCommon missed earlier - check on review */
+/* @import 'lightning/sldsCommon'; */
+/* @import './vertical-navigation.slds.css'; */

package/src/lightning/verticalNavigation/verticalNavigation.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     assert,
@@ -18,7 +17,7 @@ const ALLOWED_CHILDREN = [
  * A vertical list of links that either take the user to another page or parts of the page the user is in.
  * @slot default Placeholder for lightning-vertical-navigation-section and lightning-vertical-navigation-overflow.
  */
-export default class LightningVerticalNavigation extends LightningShadowBaseClass {
+export default class LightningVerticalNavigation extends LightningElement {
     @track _compact;
     @track _shaded;
     @track _selectedItem;

package/src/lightning/verticalNavigationSection/verticalNavigationSection.css

@@ -1,5 +1,6 @@
-@import 'lightning/sldsCommon';
-@import './vertical-navigation-section.slds.css';
+/* sldsCommon missed earlier - check on review
+@import 'lightning/sldsCommon'; */
+/* @import './vertical-navigation-section.slds.css'; */
 
 div[role="list"] {
     list-style: none;

package/src/lightning/verticalNavigationSection/verticalNavigationSection.js

@@ -1,8 +1,7 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { guid, isHeadingLevelValid } from 'lightning/utilsPrivate';
 
-export default class LightningVerticalNavigationSection extends LightningShadowBaseClass {
+export default class LightningVerticalNavigationSection extends LightningElement {
     headingId = guid();
 
     @track _label;

package/src/lightning/badge/badge.css

@@ -1,2 +0,0 @@
-@import 'lightning/sldsCommon';
-@import './badge.slds.css';

package/src/lightning/badge/badge.slds.css

@@ -1,73 +0,0 @@
-
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part="badge"] {
-    /**
-      * Remap to SLDS blueprint hooks for parity
-      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
-      *
-      */
-    --slds-c-badge-line-height: var(var(--slds-c-badge-font-lineheight));
-
-    display: inline-flex;
-    align-items: center;
-    padding: var(--sds-g-spacing-1, 0.25rem) var(--sds-g-spacing-2, 0.5rem);
-    color: var(--slds-c-badge-text-color, var(--sds-g-color-neutral-base-10, #181818));
-    font-size: var(--slds-c-badge-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-    font-weight: var(--sds-g-font-weight-7, 700);
-    line-height: var(--slds-c-badge-font-lineheight, normal);
-    white-space: nowrap;
-    border-width: var(--slds-c-badge-sizing-border, var(--sds-g-sizing-border-1, 1px));
-    border-style: solid;
-    border-color: var(--slds-c-badge-color-border, transparent);
-    border-radius: var(--slds-c-badge-radius-border, 15rem);
-    background-color: var(--slds-c-badge-color-background, var(--sds-g-color-neutral-base-95, #f3f3f3));
-  }
-
-  :host([data-render-mode="shadow"]) [part="badge"]:empty {
-    padding: 0;
-  }
-
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon {
-    display: inline-flex;
-    align-items: center;
-    color: var(--slds-c-badge-icon-color-foreground, var(--slds-g-color-neutral-base-50, var(--sds-g-color-neutral-base-50, #747474)));
-    line-height: 1;
-    vertical-align: middle;
-  }
-
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_inverse {
-    --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
-  }
-
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_left {
-    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
-  }
-  
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_right {
-    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  :host([data-render-mode="shadow"]) [part="badge"] lightning-primitive-icon {
-    vertical-align: middle;
-  }
-
-  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class. 
-     However, the public API for this component does not expose an attribute for this class. Establishing a programmatic 
-     mapping between the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
-  :host([data-render-mode="shadow"].slds-badge_inverse) {
-    --slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--slds-g-color-neutral-base-50, var(--sds-g-color-neutral-base-50, #747474)));
-    --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
-  }
-
-  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class. 
-     However, the public API for badge does not expose an attribute for this class. Establishing a programmatic mapping between
-     the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
-  :host([data-render-mode="shadow"].slds-badge_lightest) {
-    --slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
-    --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--slds-g-color-border-base-1, var(--sds-g-color-neutral-base-90, #e5e5e5)));
-  }
-
-  :host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
-    margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
-  }
-}

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

@@ -1,267 +0,0 @@
-
- @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;
-     }
-   }
- }
-