exported property "containerClasses"

src/Select.svelte

@@ -77,12 +77,12 @@
   export let itemHeight = 40;
   export let Icon = undefined;
   export let showChevron = false;
+  export let containerClasses = "";
 
   let target;
   let activeSelectedValue;
   let _items = [];
   let originalItemsClone;
-  let containerClasses = "";
   let prev_selectedValue;
   let prev_listOpen;
   let prev_filterText;
@@ -109,7 +109,8 @@
   $: disabled = isDisabled;
 
   $: {
-    containerClasses = `selectContainer`;
+    containerClasses = containerClasses
+    containerClasses += ` selectContainer`;
     containerClasses += isMulti ? " multiSelect" : "";
     containerClasses += isDisabled ? " disabled" : "";
     containerClasses += isFocused ? " focused" : "";
@@ -623,7 +624,7 @@
 <style>
   .selectContainer {
     --padding: 0 16px;
-    
+
     border: var(--border, 1px solid #d8dbdf);
     border-radius: var(--borderRadius, 3px);
     height: var(--height, 42px);

test/src/index.js

@@ -2664,6 +2664,22 @@ test('When items and loadItems then listOpen should be false', async (t) => {
   select.$destroy();
 });
 
+test('Select container classes can be injected', async (t) => {
+  const select = new Select({
+    target,
+    props: {
+      items,
+      selectedValue: { name: 'Item #2' },
+      containerClasses: 'testclass',
+    },
+  });
+
+  t.ok(
+    document.querySelector('.selectContainer').classList.contains('testclass')
+  );
+  select.$destroy();
+});
+
 function focus(element, setFocus) {
   return new Promise(fulfil => {
     element.addEventListener('focus', function handler() {