From a9460e944de9ae967664a75df842f4bdc909067f Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 7 Nov 2023 18:58:45 -0800
Subject: [PATCH] fix(select-item): export `class` and `style` props (#1840)

Closes #1839
---
 COMPONENT_INDEX.md                  | 14 ++++++++------
 docs/src/COMPONENT_API.json         | 22 ++++++++++++++++++++++
 src/Select/SelectItem.svelte        | 18 ++++++++++++++++--
 tests/Select.test.svelte            |  2 +-
 types/Select/SelectItem.svelte.d.ts | 12 ++++++++++++
 5 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 8f706c7b79..e7d55a36a4 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3208,12 +3208,14 @@ None.
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                              | Default value      | Description                         |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------------------------------- |
-| value     | No       | <code>let</code> | No       | <code>string &#124; number</code> | <code>""</code>    | Specify the option value            |
-| text      | No       | <code>let</code> | No       | <code>string</code>               | <code>""</code>    | Specify the option text             |
-| hidden    | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code> | Set to `true` to hide the option    |
-| disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code> | Set to `true` to disable the option |
+| Prop name | Required | Kind             | Reactive | Type                              | Default value          | Description                               |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- |
+| value     | No       | <code>let</code> | No       | <code>string &#124; number</code> | <code>""</code>        | Specify the option value                  |
+| text      | No       | <code>let</code> | No       | <code>string</code>               | <code>""</code>        | Specify the option text                   |
+| hidden    | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to hide the option          |
+| disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to disable the option       |
+| class     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the class of the `option` element |
+| style     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the style of the `option` element |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index c7102e9077..dbc78008e9 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -10452,6 +10452,28 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "class",
+          "kind": "let",
+          "description": "Specify the class of the `option` element",
+          "type": "string",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "style",
+          "kind": "let",
+          "description": "Specify the style of the `option` element",
+          "type": "string",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],
diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte
index e009ba6247..a33049248c 100644
--- a/src/Select/SelectItem.svelte
+++ b/src/Select/SelectItem.svelte
@@ -14,6 +14,20 @@
   /** Set to `true` to disable the option */
   export let disabled = false;
 
+  let className = undefined;
+
+  /**
+   * Specify the class of the `option` element
+   * @type {string}
+   */
+  export { className as class };
+
+  /**
+   * Specify the style of the `option` element
+   * @type {string}
+   */
+  export let style = undefined;
+
   import { getContext, onMount } from "svelte";
 
   const id = "ccs-" + Math.random().toString(36);
@@ -38,8 +52,8 @@
   hidden="{hidden}"
   selected="{selected}"
   class:bx--select-option="{true}"
-  class="{$$restProps.class}"
-  style="{$$restProps.style}"
+  class="{className}"
+  style="{style}"
 >
   {text || value}
 </option>
diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte
index d8421e0a7b..cc81277745 100644
--- a/tests/Select.test.svelte
+++ b/tests/Select.test.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <Select labelText="Carbon theme" selected="g10">
-  <SelectItem value="white" text="White" />
+  <SelectItem value="white" text="White" class="" style="" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
diff --git a/types/Select/SelectItem.svelte.d.ts b/types/Select/SelectItem.svelte.d.ts
index d9141f5123..3ff8d6896c 100644
--- a/types/Select/SelectItem.svelte.d.ts
+++ b/types/Select/SelectItem.svelte.d.ts
@@ -24,6 +24,18 @@ export interface SelectItemProps {
    * @default false
    */
   disabled?: boolean;
+
+  /**
+   * Specify the class of the `option` element
+   * @default undefined
+   */
+  class?: string;
+
+  /**
+   * Specify the style of the `option` element
+   * @default undefined
+   */
+  style?: string;
 }
 
 export default class SelectItem extends SvelteComponentTyped<