diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 10fdf870..b6c8b647 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1139,30 +1139,30 @@ export interface DropdownItem {
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| inline | let | Yes | boolean | false | Set to `true` to use the inline variant |
-| open | let | Yes | boolean | false | Set to `true` to open the dropdown |
-| selectedId | let | Yes | DropdownItemId | undefined | Specify the selected item id |
-| items | let | No | DropdownItem[] | [] | Set the dropdown items |
-| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item |
-| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown |
-| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu |
-| size | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the dropdown |
-| titleText | let | No | string | "" | Specify the title text |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
-| helperText | let | No | string | "" | Specify the helper text |
-| label | let | No | string | undefined | Specify the list box label |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | let | No | string | undefined | Specify a name attribute for the list box |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| inline | let | Yes | boolean | false | Set to `true` to use the inline variant |
+| open | let | Yes | boolean | false | Set to `true` to open the dropdown |
+| selectedId | let | Yes | DropdownItemId | undefined | Specify the selected item id |
+| items | let | No | DropdownItem[] | [] | Set the dropdown items |
+| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item |
+| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown |
+| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu |
+| size | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the dropdown |
+| titleText | let | No | string | "" | Specify the title text |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
+| helperText | let | No | string | "" | Specify the helper text |
+| label | let | No | string | undefined | Specify the list box label |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| translateWithId | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | let | No | string | undefined | Specify a name attribute for the list box |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d6c41639..7632a17f 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -3207,8 +3207,8 @@
{
"name": "translateWithId",
"kind": "let",
- "description": "Override the default translation ids",
- "type": "(id: any) => string",
+ "description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open",
+ "type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index a85c5873..d5b16a18 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -83,8 +83,9 @@
export let hideLabel = false;
/**
- * Override the default translation ids
- * @type {(id: any) => string}
+ * Override the chevron icon label based on the open state.
+ * Defaults to "Open menu" when closed and "Close menu" when open
+ * @type {(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string}
*/
export let translateWithId = undefined;
diff --git a/tests/Dropdown.test.svelte b/tests/Dropdown.test.svelte
index fea2ee86..d8f8800b 100644
--- a/tests/Dropdown.test.svelte
+++ b/tests/Dropdown.test.svelte
@@ -14,6 +14,10 @@
on:select="{(e) => {
console.log(e.detail.selectedId);
}}"
+ translateWithId="{(id) => {
+ console.log(id); // "open" | "close"
+ return id;
+ }}"
let:item
let:index
>
diff --git a/types/Dropdown/Dropdown.svelte.d.ts b/types/Dropdown/Dropdown.svelte.d.ts
index c51cd2be..72ffad12 100644
--- a/types/Dropdown/Dropdown.svelte.d.ts
+++ b/types/Dropdown/Dropdown.svelte.d.ts
@@ -121,10 +121,13 @@ export interface DropdownProps
hideLabel?: boolean;
/**
- * Override the default translation ids
+ * Override the chevron icon label based on the open state.
+ * Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined
*/
- translateWithId?: (id: any) => string;
+ translateWithId?: (
+ id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
+ ) => string;
/**
* Set an id for the list box component