diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 60816426..3600d371 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -453,7 +453,7 @@ None.
 | :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
 | ref           | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element      |
 | title         | No       | <code>let</code> | Yes      | <code>string</code>                       | <code>undefined</code>                           | Specify the title attribute for the label element |
-| group         | No       | <code>let</code> | Yes      | <code>any[]</code>                        | <code>undefined</code>                           | Specify the bound group                           |
+| group         | No       | <code>let</code> | Yes      | <code>ReadonlyArray<any></code>           | <code>undefined</code>                           | Specify the bound group                           |
 | checked       | No       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is checked           |
 | value         | No       | <code>let</code> | No       | <code>any</code>                          | <code>""</code>                                  | Specify the value of the checkbox                 |
 | indeterminate | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is indeterminate     |
@@ -659,7 +659,7 @@ export interface ComboBoxItem {
 | open                     | No       | <code>let</code>      | Yes      | <code>boolean</code>                                                                                  | <code>false</code>                                                                                                                                                                                                           | Set to `true` to open the combobox menu dropdown                                                                                                            |
 | value                    | No       | <code>let</code>      | Yes      | <code>string</code>                                                                                   | <code>""</code>                                                                                                                                                                                                              | Specify the selected combobox value                                                                                                                         |
 | selectedId               | No       | <code>let</code>      | Yes      | <code>ComboBoxItemId</code>                                                                           | <code>undefined</code>                                                                                                                                                                                                       | Set the selected item by value id                                                                                                                           |
-| items                    | No       | <code>let</code>      | No       | <code>ComboBoxItem[]</code>                                                                           | <code>[]</code>                                                                                                                                                                                                              | Set the combobox items                                                                                                                                      |
+| items                    | No       | <code>let</code>      | No       | <code>ReadonlyArray<ComboBoxItem></code>                                                              | <code>[]</code>                                                                                                                                                                                                              | Set the combobox items                                                                                                                                      |
 | itemToString             | No       | <code>let</code>      | No       | <code>(item: ComboBoxItem) => string</code>                                                           | <code>(item) => item.text &#124;&#124; item.id</code>                                                                                                                                                                        | Override the display of a combobox item                                                                                                                     |
 | direction                | No       | <code>let</code>      | No       | <code>"bottom" &#124; "top"</code>                                                                    | <code>"bottom"</code>                                                                                                                                                                                                        | Specify the direction of the combobox dropdown menu                                                                                                         |
 | size                     | No       | <code>let</code>      | No       | <code>"sm" &#124; "xl"</code>                                                                         | <code>undefined</code>                                                                                                                                                                                                       | Set the size of the combobox                                                                                                                                |
@@ -780,13 +780,13 @@ None.
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                                                      | Default value      | Description                                                                                                                                        |
-| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code>                 | <code>null</code>  | Obtain a reference to the unordered list HTML element                                                                                              |
-| y         | No       | <code>let</code> | Yes      | <code>number</code>                                       | <code>0</code>     | Specify the vertical offset of the menu position                                                                                                   |
-| x         | No       | <code>let</code> | Yes      | <code>number</code>                                       | <code>0</code>     | Specify the horizontal offset of the menu position                                                                                                 |
-| open      | No       | <code>let</code> | Yes      | <code>boolean</code>                                      | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero                                                                   |
-| target    | No       | <code>let</code> | No       | <code>null &#124; HTMLElement &#124; HTMLElement[]</code> | <code>null</code>  | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window |
+| Prop name | Required | Kind             | Reactive | Type                                                            | Default value      | Description                                                                                                                                        |
+| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code>                       | <code>null</code>  | Obtain a reference to the unordered list HTML element                                                                                              |
+| y         | No       | <code>let</code> | Yes      | <code>number</code>                                             | <code>0</code>     | Specify the vertical offset of the menu position                                                                                                   |
+| x         | No       | <code>let</code> | Yes      | <code>number</code>                                             | <code>0</code>     | Specify the horizontal offset of the menu position                                                                                                 |
+| open      | No       | <code>let</code> | Yes      | <code>boolean</code>                                            | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero                                                                   |
+| target    | No       | <code>let</code> | No       | <code>null &#124; ReadonlyArray<null &#124; HTMLElement></code> | <code>null</code>  | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window |
 
 ### Slots
 
@@ -821,10 +821,10 @@ None.
 
 ### Props
 
-| Prop name   | Required | Kind             | Reactive | Type                  | Default value   | Description            |
-| :---------- | :------- | :--------------- | :------- | --------------------- | --------------- | ---------------------- |
-| selectedIds | No       | <code>let</code> | Yes      | <code>string[]</code> | <code>[]</code> | --                     |
-| labelText   | No       | <code>let</code> | No       | <code>string</code>   | <code>""</code> | Specify the label text |
+| Prop name   | Required | Kind             | Reactive | Type                               | Default value   | Description            |
+| :---------- | :------- | :--------------- | :------- | ---------------------------------- | --------------- | ---------------------- |
+| selectedIds | No       | <code>let</code> | Yes      | <code>ReadonlyArray<string></code> | <code>[]</code> | --                     |
+| labelText   | No       | <code>let</code> | No       | <code>string</code>                | <code>""</code> | Specify the label text |
 
 ### Slots
 
@@ -963,22 +963,22 @@ export interface DataTableCell {
 
 | Prop name           | Required | Kind             | Reactive | Type                                                                | Default value          | Description                                                                                                         |
 | :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| selectedRowIds      | No       | <code>let</code> | Yes      | <code>DataTableRowId[]</code>                                       | <code>[]</code>        | Specify the row ids to be selected                                                                                  |
+| selectedRowIds      | No       | <code>let</code> | Yes      | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>        | Specify the row ids to be selected                                                                                  |
 | selectable          | No       | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code>     | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
-| expandedRowIds      | No       | <code>let</code> | Yes      | <code>DataTableRowId[]</code>                                       | <code>[]</code>        | Specify the row ids to be expanded                                                                                  |
+| expandedRowIds      | No       | <code>let</code> | Yes      | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>        | Specify the row ids to be expanded                                                                                  |
 | expandable          | No       | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code>     | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true`             |
-| headers             | No       | <code>let</code> | No       | <code>DataTableHeader[]</code>                                      | <code>[]</code>        | Specify the data table headers                                                                                      |
-| rows                | No       | <code>let</code> | No       | <code>DataTableRow[]</code>                                         | <code>[]</code>        | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
+| headers             | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableHeader></code>                         | <code>[]</code>        | Specify the data table headers                                                                                      |
+| rows                | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableRow></code>                            | <code>[]</code>        | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
 | size                | No       | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table                                                                                      |
 | title               | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>        | Specify the title of the data table                                                                                 |
 | description         | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>        | Specify the description of the data table                                                                           |
 | zebra               | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` to use zebra styles                                                                                   |
 | sortable            | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` for the sortable variant                                                                              |
 | batchExpansion      | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` to enable batch expansion                                                                             |
-| nonExpandableRowIds | No       | <code>let</code> | No       | <code>DataTableRowId[]</code>                                       | <code>[]</code>        | Specify the ids for rows that should not be expandable                                                              |
+| nonExpandableRowIds | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>        | Specify the ids for rows that should not be expandable                                                              |
 | radio               | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` for the radio selection variant                                                                       |
 | batchSelection      | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` to enable batch selection                                                                             |
-| nonSelectableRowIds | No       | <code>let</code> | No       | <code>DataTableRowId[]</code>                                       | <code>[]</code>        | Specify the ids of rows that should not be selectable                                                               |
+| nonSelectableRowIds | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>        | Specify the ids of rows that should not be selectable                                                               |
 | stickyHeader        | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` to enable a sticky header                                                                             |
 | useStaticWidth      | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` to use static width                                                                                   |
 | pageSize            | No       | <code>let</code> | No       | <code>number</code>                                                 | <code>0</code>         | Specify the number of items to display in a page                                                                    |
@@ -1012,15 +1012,15 @@ export interface DataTableCell {
 
 ### Props
 
-| Prop name   | Required | Kind             | Reactive | Type                                                    | Default value          | Description                                                                                  |
-| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------- |
-| columns     | No       | <code>let</code> | No       | <code>number</code>                                     | <code>5</code>         | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
-| rows        | No       | <code>let</code> | No       | <code>number</code>                                     | <code>5</code>         | Specify the number of rows                                                                   |
-| size        | No       | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "tall"</code>     | <code>undefined</code> | Set the size of the data table                                                               |
-| zebra       | No       | <code>let</code> | No       | <code>boolean</code>                                    | <code>false</code>     | Set to `true` to apply zebra styles to the datatable rows                                    |
-| showHeader  | No       | <code>let</code> | No       | <code>boolean</code>                                    | <code>true</code>      | Set to `false` to hide the header                                                            |
-| headers     | No       | <code>let</code> | No       | <code>string[] &#124; Partial<DataTableHeader>[]</code> | <code>[]</code>        | Set the column headers<br />Supersedes `columns` if value is a non-empty array               |
-| showToolbar | No       | <code>let</code> | No       | <code>boolean</code>                                    | <code>true</code>      | Set to `false` to hide the toolbar                                                           |
+| Prop name   | Required | Kind             | Reactive | Type                                                               | Default value          | Description                                                                                  |
+| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
+| columns     | No       | <code>let</code> | No       | <code>number</code>                                                | <code>5</code>         | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
+| rows        | No       | <code>let</code> | No       | <code>number</code>                                                | <code>5</code>         | Specify the number of rows                                                                   |
+| size        | No       | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "tall"</code>                | <code>undefined</code> | Set the size of the data table                                                               |
+| zebra       | No       | <code>let</code> | No       | <code>boolean</code>                                               | <code>false</code>     | Set to `true` to apply zebra styles to the datatable rows                                    |
+| showHeader  | No       | <code>let</code> | No       | <code>boolean</code>                                               | <code>true</code>      | Set to `false` to hide the header                                                            |
+| headers     | No       | <code>let</code> | No       | <code>ReadonlyArray<string &#124; Partial<DataTableHeader>></code> | <code>[]</code>        | Set the column headers<br />Supersedes `columns` if value is a non-empty array               |
+| showToolbar | No       | <code>let</code> | No       | <code>boolean</code>                                               | <code>true</code>      | Set to `false` to hide the toolbar                                                           |
 
 ### Slots
 
@@ -1154,7 +1154,7 @@ export interface DropdownItem {
 | ref             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                                                            | <code>null</code>                                     | Obtain a reference to the button HTML element                                                                                |
 | open            | No       | <code>let</code> | Yes      | <code>boolean</code>                                                                                  | <code>false</code>                                    | Set to `true` to open the dropdown                                                                                           |
 | selectedId      | Yes      | <code>let</code> | Yes      | <code>DropdownItemId</code>                                                                           | <code>undefined</code>                                | Specify the selected item id                                                                                                 |
-| items           | No       | <code>let</code> | No       | <code>DropdownItem[]</code>                                                                           | <code>[]</code>                                       | Set the dropdown items                                                                                                       |
+| items           | No       | <code>let</code> | No       | <code>ReadonlyArray<DropdownItem></code>                                                              | <code>[]</code>                                       | Set the dropdown items                                                                                                       |
 | itemToString    | No       | <code>let</code> | No       | <code>(item: DropdownItem) => string</code>                                                           | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item                                                                                      |
 | type            | No       | <code>let</code> | No       | <code>"default" &#124; "inline"</code>                                                                | <code>"default"</code>                                | Specify the type of dropdown                                                                                                 |
 | direction       | No       | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                                                                    | <code>"bottom"</code>                                 | Specify the direction of the dropdown menu                                                                                   |
@@ -1247,10 +1247,10 @@ None.
 
 | Prop name        | Required | Kind               | Reactive | Type                                                                                       | Default value                           | Description                                                 |
 | :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- |
-| files            | No       | <code>let</code>   | Yes      | <code>File[]</code>                                                                        | <code>[]</code>                         | Obtain a reference to the uploaded files                    |
+| files            | No       | <code>let</code>   | Yes      | <code>ReadonlyArray<File></code>                                                           | <code>[]</code>                         | Obtain a reference to the uploaded files                    |
 | status           | No       | <code>let</code>   | No       | <code>"uploading" &#124; "edit" &#124; "complete"</code>                                   | <code>"uploading"</code>                | Specify the file uploader status                            |
 | disabled         | No       | <code>let</code>   | No       | <code>boolean</code>                                                                       | <code>false</code>                      | Set to `true` to disable the file uploader                  |
-| accept           | No       | <code>let</code>   | No       | <code>string[]</code>                                                                      | <code>[]</code>                         | Specify the accepted file types                             |
+| accept           | No       | <code>let</code>   | No       | <code>ReadonlyArray<string></code>                                                         | <code>[]</code>                         | Specify the accepted file types                             |
 | multiple         | No       | <code>let</code>   | No       | <code>boolean</code>                                                                       | <code>false</code>                      | Set to `true` to allow multiple files                       |
 | clearFiles       | No       | <code>const</code> | No       | <code>() => void</code>                                                                    | <code>() => { files = []; }</code>      | Programmatically clear the uploaded files                   |
 | labelDescription | No       | <code>let</code>   | No       | <code>string</code>                                                                        | <code>""</code>                         | Specify the label description                               |
@@ -1266,16 +1266,16 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail              |
-| :--------- | :--------- | :------------------ |
-| add        | dispatched | <code>File[]</code> |
-| remove     | dispatched | <code>File[]</code> |
-| change     | dispatched | <code>File[]</code> |
-| click      | forwarded  | --                  |
-| mouseover  | forwarded  | --                  |
-| mouseenter | forwarded  | --                  |
-| mouseleave | forwarded  | --                  |
-| keydown    | forwarded  | --                  |
+| Event name | Type       | Detail                           |
+| :--------- | :--------- | :------------------------------- |
+| add        | dispatched | <code>ReadonlyArray<File></code> |
+| remove     | dispatched | <code>ReadonlyArray<File></code> |
+| change     | dispatched | <code>ReadonlyArray<File></code> |
+| click      | forwarded  | --                               |
+| mouseover  | forwarded  | --                               |
+| mouseenter | forwarded  | --                               |
+| mouseleave | forwarded  | --                               |
+| keydown    | forwarded  | --                               |
 
 ## `FileUploaderButton`
 
@@ -1285,8 +1285,8 @@ None.
 | :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- |
 | ref                 | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                                                  | <code>null</code>                                | Obtain a reference to the input HTML element |
 | labelText           | No       | <code>let</code> | Yes      | <code>string</code>                                                                        | <code>"Add file"</code>                          | Specify the label text                       |
-| files               | No       | <code>let</code> | Yes      | <code>File[]</code>                                                                        | <code>[]</code>                                  | Obtain a reference to the uploaded files     |
-| accept              | No       | <code>let</code> | No       | <code>string[]</code>                                                                      | <code>[]</code>                                  | Specify the accepted file types              |
+| files               | No       | <code>let</code> | Yes      | <code>ReadonlyArray<File></code>                                                           | <code>[]</code>                                  | Obtain a reference to the uploaded files     |
+| accept              | No       | <code>let</code> | No       | <code>ReadonlyArray<string></code>                                                         | <code>[]</code>                                  | Specify the accepted file types              |
 | multiple            | No       | <code>let</code> | No       | <code>boolean</code>                                                                       | <code>false</code>                               | Set to `true` to allow multiple files        |
 | disabled            | No       | <code>let</code> | No       | <code>boolean</code>                                                                       | <code>false</code>                               | Set to `true` to disable the input           |
 | disableLabelChanges | No       | <code>let</code> | No       | <code>boolean</code>                                                                       | <code>false</code>                               | Set to `true` to disable label changes       |
@@ -1304,29 +1304,29 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail              |
-| :--------- | :--------- | :------------------ |
-| change     | dispatched | <code>File[]</code> |
-| keydown    | forwarded  | --                  |
-| click      | forwarded  | --                  |
+| Event name | Type       | Detail                           |
+| :--------- | :--------- | :------------------------------- |
+| change     | dispatched | <code>ReadonlyArray<File></code> |
+| keydown    | forwarded  | --                               |
+| click      | forwarded  | --                               |
 
 ## `FileUploaderDropContainer`
 
 ### Props
 
-| Prop name     | Required | Kind             | Reactive | Type                                      | Default value                                    | Description                                                                                                  |
-| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
-| ref           | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element                                                                 |
-| files         | No       | <code>let</code> | Yes      | <code>File[]</code>                       | <code>[]</code>                                  | Obtain a reference to the uploaded files                                                                     |
-| accept        | No       | <code>let</code> | No       | <code>string[]</code>                     | <code>[]</code>                                  | Specify the accepted file types                                                                              |
-| multiple      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to allow multiple files                                                                        |
-| validateFiles | No       | <code>let</code> | No       | <code>(files: File[]) => File[]</code>    | <code>(files) => files</code>                    | Override the default behavior of validating uploaded files<br />The default behavior does not validate files |
-| labelText     | No       | <code>let</code> | No       | <code>string</code>                       | <code>"Add file"</code>                          | Specify the label text                                                                                       |
-| role          | No       | <code>let</code> | No       | <code>string</code>                       | <code>"button"</code>                            | Specify the `role` attribute of the drop container                                                           |
-| disabled      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the input                                                                           |
-| tabindex      | No       | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify `tabindex` attribute                                                                                 |
-| id            | No       | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                                                                              |
-| name          | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify a name attribute for the input                                                                       |
+| Prop name     | Required | Kind             | Reactive | Type                                                             | Default value                                    | Description                                                                                          |
+| :------------ | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| ref           | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                        | <code>null</code>                                | Obtain a reference to the input HTML element                                                         |
+| files         | No       | <code>let</code> | Yes      | <code>ReadonlyArray<File></code>                                 | <code>[]</code>                                  | Obtain a reference to the uploaded files                                                             |
+| accept        | No       | <code>let</code> | No       | <code>ReadonlyArray<string></code>                               | <code>[]</code>                                  | Specify the accepted file types                                                                      |
+| multiple      | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                               | Set to `true` to allow multiple files                                                                |
+| validateFiles | No       | <code>let</code> | No       | <code>(files: ReadonlyArray<File>) => ReadonlyArray<File></code> | <code>(files) => files</code>                    | Override the default behavior of validating uploaded files.<br />By default, files are not validated |
+| labelText     | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"Add file"</code>                          | Specify the label text                                                                               |
+| role          | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"button"</code>                            | Specify the `role` attribute of the drop container                                                   |
+| disabled      | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                               | Set to `true` to disable the input                                                                   |
+| tabindex      | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"0"</code>                                 | Specify `tabindex` attribute                                                                         |
+| id            | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                                                                      |
+| name          | No       | <code>let</code> | No       | <code>string</code>                                              | <code>""</code>                                  | Specify a name attribute for the input                                                               |
 
 ### Slots
 
@@ -1336,15 +1336,15 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail              |
-| :--------- | :--------- | :------------------ |
-| add        | dispatched | <code>File[]</code> |
-| change     | dispatched | <code>File[]</code> |
-| dragover   | forwarded  | --                  |
-| dragleave  | forwarded  | --                  |
-| drop       | forwarded  | --                  |
-| keydown    | forwarded  | --                  |
-| click      | forwarded  | --                  |
+| Event name | Type       | Detail                           |
+| :--------- | :--------- | :------------------------------- |
+| add        | dispatched | <code>ReadonlyArray<File></code> |
+| change     | dispatched | <code>ReadonlyArray<File></code> |
+| dragover   | forwarded  | --                               |
+| dragleave  | forwarded  | --                               |
+| drop       | forwarded  | --                               |
+| keydown    | forwarded  | --                               |
+| click      | forwarded  | --                               |
 
 ## `FileUploaderItem`
 
@@ -1805,13 +1805,13 @@ export interface HeaderSearchResult {
 
 ### Props
 
-| Prop name           | Required | Kind             | Reactive | Type                                      | Default value      | Description                                        |
-| :------------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------ | -------------------------------------------------- |
-| selectedResultIndex | No       | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the selected result index                  |
-| ref                 | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>  | Obtain a reference to the input HTML element       |
-| active              | No       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to activate and focus the search bar |
-| value               | No       | <code>let</code> | Yes      | <code>string</code>                       | <code>""</code>    | Specify the search input value                     |
-| results             | No       | <code>let</code> | No       | <code>HeaderSearchResult[]</code>         | <code>[]</code>    | Render a list of search results                    |
+| Prop name           | Required | Kind             | Reactive | Type                                           | Default value      | Description                                        |
+| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | ------------------ | -------------------------------------------------- |
+| selectedResultIndex | No       | <code>let</code> | Yes      | <code>number</code>                            | <code>0</code>     | Specify the selected result index                  |
+| ref                 | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>      | <code>null</code>  | Obtain a reference to the input HTML element       |
+| active              | No       | <code>let</code> | Yes      | <code>boolean</code>                           | <code>false</code> | Set to `true` to activate and focus the search bar |
+| value               | No       | <code>let</code> | Yes      | <code>string</code>                            | <code>""</code>    | Specify the search input value                     |
+| results             | No       | <code>let</code> | No       | <code>ReadonlyArray<HeaderSearchResult></code> | <code>[]</code>    | Render a list of search results                    |
 
 ### Slots
 
@@ -2348,8 +2348,8 @@ export interface MultiSelectItem {
 | inputRef                 | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                                                               | <code>null</code>                                                                          | Obtain a reference to the input HTML element                                                                                                                          |
 | open                     | No       | <code>let</code> | Yes      | <code>boolean</code>                                                                                    | <code>false</code>                                                                         | Set to `true` to open the dropdown                                                                                                                                    |
 | value                    | No       | <code>let</code> | Yes      | <code>string</code>                                                                                     | <code>""</code>                                                                            | Specify the multiselect value                                                                                                                                         |
-| selectedIds              | No       | <code>let</code> | Yes      | <code>MultiSelectItemId[]</code>                                                                        | <code>[]</code>                                                                            | Set the selected ids                                                                                                                                                  |
-| items                    | No       | <code>let</code> | Yes      | <code>MultiSelectItem[]</code>                                                                          | <code>[]</code>                                                                            | Set the multiselect items                                                                                                                                             |
+| selectedIds              | No       | <code>let</code> | Yes      | <code>ReadonlyArray<MultiSelectItemId></code>                                                           | <code>[]</code>                                                                            | Set the selected ids                                                                                                                                                  |
+| items                    | No       | <code>let</code> | Yes      | <code>ReadonlyArray<MultiSelectItem></code>                                                             | <code>[]</code>                                                                            | Set the multiselect items                                                                                                                                             |
 | itemToString             | No       | <code>let</code> | No       | <code>(item: MultiSelectItem) => any</code>                                                             | <code>(item) => item.text &#124;&#124; item.id</code>                                      | Override the display of a multiselect item                                                                                                                            |
 | itemToInput              | No       | <code>let</code> | No       | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code>             | <code>(item) => {}</code>                                                                  | Override the item name, title, labelText passed to the checkbox input                                                                                                 |
 | size                     | No       | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                                                               | <code>undefined</code>                                                                     | Set the size of the combobox                                                                                                                                          |
@@ -2664,7 +2664,7 @@ None.
 | itemRangeText         | No       | <code>let</code> | No       | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => \`${min}–${max} of ${total} items\`</code>          | Override the item range text                     |
 | pageInputDisabled     | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                             | Set to `true` to disable the page input          |
 | pageSizeInputDisabled | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                             | Set to `true` to disable the page size input     |
-| pageSizes             | No       | <code>let</code> | No       | <code>number[]</code>                                            | <code>[10]</code>                                                              | Specify the available page sizes                 |
+| pageSizes             | No       | <code>let</code> | No       | <code>ReadonlyArray<number></code>                               | <code>[10]</code>                                                              | Specify the available page sizes                 |
 | pagesUnknown          | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                             | Set to `true` if the number of pages is unknown  |
 | pageText              | No       | <code>let</code> | No       | <code>(page: number) => string</code>                            | <code>(page) => \`page ${page}\`</code>                                        | Override the page text                           |
 | pageRangeText         | No       | <code>let</code> | No       | <code>(current: number, total: number) => string</code>          | <code>(current, total) => \`of ${total} page${total === 1 ? "" : "s"}\`</code> | Override the page range text                     |
@@ -4648,8 +4648,8 @@ export interface TreeNode {
 
 | Prop name     | Required | Kind                  | Reactive | Type                                                          | Default value                                                                                                                                                                              | Description                                                                                      |
 | :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
-| expandedIds   | No       | <code>let</code>      | Yes      | <code>TreeNodeId[]</code>                                     | <code>[]</code>                                                                                                                                                                            | Set the node ids to be expanded                                                                  |
-| selectedIds   | No       | <code>let</code>      | Yes      | <code>TreeNodeId[]</code>                                     | <code>[]</code>                                                                                                                                                                            | Set the node ids to be selected                                                                  |
+| expandedIds   | No       | <code>let</code>      | Yes      | <code>ReadonlyArray<TreeNodeId></code>                        | <code>[]</code>                                                                                                                                                                            | Set the node ids to be expanded                                                                  |
+| selectedIds   | No       | <code>let</code>      | Yes      | <code>ReadonlyArray<TreeNodeId></code>                        | <code>[]</code>                                                                                                                                                                            | Set the node ids to be selected                                                                  |
 | activeId      | No       | <code>let</code>      | Yes      | <code>TreeNodeId</code>                                       | <code>""</code>                                                                                                                                                                            | Set the current active node id<br />Only one node can be active                                  |
 | children      | No       | <code>let</code>      | No       | <code>Array<TreeNode & { children?: TreeNode[] }></code>      | <code>[]</code>                                                                                                                                                                            | Provide an array of children nodes to render                                                     |
 | size          | No       | <code>let</code>      | No       | <code>"default" &#124; "compact"</code>                       | <code>"default"</code>                                                                                                                                                                     | Specify the TreeView size                                                                        |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index dfc29c4c..562853ce 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -754,7 +754,7 @@
           "name": "group",
           "kind": "let",
           "description": "Specify the bound group",
-          "type": "any[]",
+          "type": "ReadonlyArray<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -1460,7 +1460,7 @@
           "name": "items",
           "kind": "let",
           "description": "Set the combobox items",
-          "type": "ComboBoxItem[]",
+          "type": "ReadonlyArray<ComboBoxItem>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -1961,7 +1961,7 @@
           "name": "target",
           "kind": "let",
           "description": "Specify an element or list of elements to trigger the context menu.\nIf no element is specified, the context menu applies to the entire window",
-          "type": "null | HTMLElement | HTMLElement[]",
+          "type": "null | ReadonlyArray<null | HTMLElement>",
           "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2045,7 +2045,7 @@
         {
           "name": "selectedIds",
           "kind": "let",
-          "type": "string[]",
+          "type": "ReadonlyArray<string>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2342,7 +2342,7 @@
           "name": "headers",
           "kind": "let",
           "description": "Specify the data table headers",
-          "type": "DataTableHeader[]",
+          "type": "ReadonlyArray<DataTableHeader>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2354,7 +2354,7 @@
           "name": "rows",
           "kind": "let",
           "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids",
-          "type": "DataTableRow[]",
+          "type": "ReadonlyArray<DataTableRow>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2449,7 +2449,7 @@
           "name": "expandedRowIds",
           "kind": "let",
           "description": "Specify the row ids to be expanded",
-          "type": "DataTableRowId[]",
+          "type": "ReadonlyArray<DataTableRowId>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2461,7 +2461,7 @@
           "name": "nonExpandableRowIds",
           "kind": "let",
           "description": "Specify the ids for rows that should not be expandable",
-          "type": "DataTableRowId[]",
+          "type": "ReadonlyArray<DataTableRowId>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2509,7 +2509,7 @@
           "name": "selectedRowIds",
           "kind": "let",
           "description": "Specify the row ids to be selected",
-          "type": "DataTableRowId[]",
+          "type": "ReadonlyArray<DataTableRowId>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2521,7 +2521,7 @@
           "name": "nonSelectableRowIds",
           "kind": "let",
           "description": "Specify the ids of rows that should not be selectable",
-          "type": "DataTableRowId[]",
+          "type": "ReadonlyArray<DataTableRowId>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -2760,7 +2760,7 @@
           "name": "headers",
           "kind": "let",
           "description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
-          "type": "string[] | Partial<DataTableHeader>[]",
+          "type": "ReadonlyArray<string | Partial<DataTableHeader>>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -3223,7 +3223,7 @@
           "name": "items",
           "kind": "let",
           "description": "Set the dropdown items",
-          "type": "DropdownItem[]",
+          "type": "ReadonlyArray<DropdownItem>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -3714,7 +3714,7 @@
           "name": "accept",
           "kind": "let",
           "description": "Specify the accepted file types",
-          "type": "string[]",
+          "type": "ReadonlyArray<string>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -3726,7 +3726,7 @@
           "name": "files",
           "kind": "let",
           "description": "Obtain a reference to the uploaded files",
-          "type": "File[]",
+          "type": "ReadonlyArray<File>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -3834,9 +3834,21 @@
       "moduleExports": [],
       "slots": [],
       "events": [
-        { "type": "dispatched", "name": "add", "detail": "File[]" },
-        { "type": "dispatched", "name": "remove", "detail": "File[]" },
-        { "type": "dispatched", "name": "change", "detail": "File[]" },
+        {
+          "type": "dispatched",
+          "name": "add",
+          "detail": "ReadonlyArray<File>"
+        },
+        {
+          "type": "dispatched",
+          "name": "remove",
+          "detail": "ReadonlyArray<File>"
+        },
+        {
+          "type": "dispatched",
+          "name": "change",
+          "detail": "ReadonlyArray<File>"
+        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
@@ -3854,7 +3866,7 @@
           "name": "accept",
           "kind": "let",
           "description": "Specify the accepted file types",
-          "type": "string[]",
+          "type": "ReadonlyArray<string>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -3866,7 +3878,7 @@
           "name": "files",
           "kind": "let",
           "description": "Obtain a reference to the uploaded files",
-          "type": "File[]",
+          "type": "ReadonlyArray<File>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -4005,7 +4017,11 @@
         }
       ],
       "events": [
-        { "type": "dispatched", "name": "change", "detail": "File[]" },
+        {
+          "type": "dispatched",
+          "name": "change",
+          "detail": "ReadonlyArray<File>"
+        },
         { "type": "forwarded", "name": "keydown", "element": "label" },
         { "type": "forwarded", "name": "click", "element": "input" }
       ],
@@ -4020,7 +4036,7 @@
           "name": "accept",
           "kind": "let",
           "description": "Specify the accepted file types",
-          "type": "string[]",
+          "type": "ReadonlyArray<string>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -4032,7 +4048,7 @@
           "name": "files",
           "kind": "let",
           "description": "Obtain a reference to the uploaded files",
-          "type": "File[]",
+          "type": "ReadonlyArray<File>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -4055,8 +4071,8 @@
         {
           "name": "validateFiles",
           "kind": "let",
-          "description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files",
-          "type": "(files: File[]) => File[]",
+          "description": "Override the default behavior of validating uploaded files.\nBy default, files are not validated",
+          "type": "(files: ReadonlyArray<File>) => ReadonlyArray<File>",
           "value": "(files) => files",
           "isFunction": true,
           "isFunctionDeclaration": false,
@@ -4159,8 +4175,16 @@
         }
       ],
       "events": [
-        { "type": "dispatched", "name": "add", "detail": "File[]" },
-        { "type": "dispatched", "name": "change", "detail": "File[]" },
+        {
+          "type": "dispatched",
+          "name": "add",
+          "detail": "ReadonlyArray<File>"
+        },
+        {
+          "type": "dispatched",
+          "name": "change",
+          "detail": "ReadonlyArray<File>"
+        },
         { "type": "forwarded", "name": "dragover", "element": "div" },
         { "type": "forwarded", "name": "dragleave", "element": "div" },
         { "type": "forwarded", "name": "drop", "element": "div" },
@@ -5245,7 +5269,7 @@
           "name": "results",
           "kind": "let",
           "description": "Render a list of search results",
-          "type": "HeaderSearchResult[]",
+          "type": "ReadonlyArray<HeaderSearchResult>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -6861,7 +6885,7 @@
           "name": "items",
           "kind": "let",
           "description": "Set the multiselect items",
-          "type": "MultiSelectItem[]",
+          "type": "ReadonlyArray<MultiSelectItem>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -6897,7 +6921,7 @@
           "name": "selectedIds",
           "kind": "let",
           "description": "Set the selected ids",
-          "type": "MultiSelectItemId[]",
+          "type": "ReadonlyArray<MultiSelectItemId>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -8283,7 +8307,7 @@
           "name": "pageSizes",
           "kind": "let",
           "description": "Specify the available page sizes",
-          "type": "number[]",
+          "type": "ReadonlyArray<number>",
           "value": "[10]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -14210,7 +14234,7 @@
           "name": "selectedIds",
           "kind": "let",
           "description": "Set the node ids to be selected",
-          "type": "TreeNodeId[]",
+          "type": "ReadonlyArray<TreeNodeId>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -14222,7 +14246,7 @@
           "name": "expandedIds",
           "kind": "let",
           "description": "Set the node ids to be expanded",
-          "type": "TreeNodeId[]",
+          "type": "ReadonlyArray<TreeNodeId>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index 1c7a2789..a98efe29 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -14,7 +14,7 @@
 
   /**
    * Specify the bound group
-   * @type {any[]}
+   * @type {ReadonlyArray<any>}
    */
   export let group = undefined;
 
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index b1100b25..76e59a44 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -8,7 +8,7 @@
 
   /**
    * Set the combobox items
-   * @type {ComboBoxItem[]}
+   * @type {ReadonlyArray<ComboBoxItem>}
    */
   export let items = [];
 
diff --git a/src/ContextMenu/ContextMenu.svelte b/src/ContextMenu/ContextMenu.svelte
index c1490844..68adc47a 100644
--- a/src/ContextMenu/ContextMenu.svelte
+++ b/src/ContextMenu/ContextMenu.svelte
@@ -6,7 +6,7 @@
   /**
    * Specify an element or list of elements to trigger the context menu.
    * If no element is specified, the context menu applies to the entire window
-   * @type {null | HTMLElement | HTMLElement[]}
+   * @type {null | ReadonlyArray<null | HTMLElement>}
    */
   export let target = null;
 
diff --git a/src/ContextMenu/ContextMenuGroup.svelte b/src/ContextMenu/ContextMenuGroup.svelte
index 2ae256c7..c38d683a 100644
--- a/src/ContextMenu/ContextMenuGroup.svelte
+++ b/src/ContextMenu/ContextMenuGroup.svelte
@@ -1,5 +1,5 @@
 <script>
-  /** @type {string[]} */
+  /** @type {ReadonlyArray<string>} */
   export let selectedIds = [];
 
   /** Specify the label text */
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 7e2ba502..f9289e9b 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -24,14 +24,14 @@
 
   /**
    * Specify the data table headers
-   * @type {DataTableHeader[]}
+   * @type {ReadonlyArray<DataTableHeader>}
    */
   export let headers = [];
 
   /**
    * Specify the rows the data table should render
    * keys defined in `headers` are used for the row ids
-   * @type {DataTableRow[]}
+   * @type {ReadonlyArray<DataTableRow>}
    */
   export let rows = [];
 
@@ -66,13 +66,13 @@
 
   /**
    * Specify the row ids to be expanded
-   * @type {DataTableRowId[]}
+   * @type {ReadonlyArray<DataTableRowId>}
    */
   export let expandedRowIds = [];
 
   /**
    * Specify the ids for rows that should not be expandable
-   * @type {DataTableRowId[]}
+   * @type {ReadonlyArray<DataTableRowId>}
    */
   export let nonExpandableRowIds = [];
 
@@ -90,13 +90,13 @@
 
   /**
    * Specify the row ids to be selected
-   * @type {DataTableRowId[]}
+   * @type {ReadonlyArray<DataTableRowId>}
    */
   export let selectedRowIds = [];
 
   /**
    * Specify the ids of rows that should not be selectable
-   * @type {DataTableRowId[]}
+   * @type {ReadonlyArray<DataTableRowId>}
    */
   export let nonSelectableRowIds = [];
 
diff --git a/src/DataTable/DataTableSkeleton.svelte b/src/DataTable/DataTableSkeleton.svelte
index 84c553bb..2628d9ed 100644
--- a/src/DataTable/DataTableSkeleton.svelte
+++ b/src/DataTable/DataTableSkeleton.svelte
@@ -25,7 +25,7 @@
   /**
    * Set the column headers
    * Supersedes `columns` if value is a non-empty array
-   * @type {string[] | Partial<DataTableHeader>[]}
+   * @type {ReadonlyArray<string | Partial<DataTableHeader>>}
    */
   export let headers = [];
 
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index e78ceb62..936841f2 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -9,7 +9,7 @@
 
   /**
    * Set the dropdown items
-   * @type {DropdownItem[]}
+   * @type {ReadonlyArray<DropdownItem>}
    */
   export let items = [];
 
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index b661ab75..4597937e 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -1,8 +1,8 @@
 <script>
   /**
-   * @event {File[]} add
-   * @event {File[]} remove
-   * @event {File[]} change
+   * @event {ReadonlyArray<File>} add
+   * @event {ReadonlyArray<File>} remove
+   * @event {ReadonlyArray<File>} change
    */
 
   /**
@@ -16,13 +16,13 @@
 
   /**
    * Specify the accepted file types
-   * @type {string[]}
+   * @type {ReadonlyArray<string>}
    */
   export let accept = [];
 
   /**
    * Obtain a reference to the uploaded files
-   * @type {File[]}
+   * @type {ReadonlyArray<File>}
    */
   export let files = [];
 
diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index 1e8b8366..16864fb3 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -1,17 +1,17 @@
 <script>
   /**
-   * @event {File[]} change
+   * @event {ReadonlyArray<File>} change
    */
 
   /**
    * Specify the accepted file types
-   * @type {string[]}
+   * @type {ReadonlyArray<string>}
    */
   export let accept = [];
 
   /**
    * Obtain a reference to the uploaded files
-   * @type {File[]}
+   * @type {ReadonlyArray<File>}
    */
   export let files = [];
 
diff --git a/src/FileUploader/FileUploaderDropContainer.svelte b/src/FileUploader/FileUploaderDropContainer.svelte
index 0b82c811..20213bef 100644
--- a/src/FileUploader/FileUploaderDropContainer.svelte
+++ b/src/FileUploader/FileUploaderDropContainer.svelte
@@ -1,18 +1,18 @@
 <script>
   /**
-   * @event {File[]} add
-   * @event {File[]} change
+   * @event {ReadonlyArray<File>} add
+   * @event {ReadonlyArray<File>} change
    */
 
   /**
    * Specify the accepted file types
-   * @type {string[]}
+   * @type {ReadonlyArray<string>}
    */
   export let accept = [];
 
   /**
    * Obtain a reference to the uploaded files
-   * @type {File[]}
+   * @type {ReadonlyArray<File>}
    */
   export let files = [];
 
@@ -20,9 +20,9 @@
   export let multiple = false;
 
   /**
-   * Override the default behavior of validating uploaded files
-   * The default behavior does not validate files
-   * @type {(files: File[]) => File[]}
+   * Override the default behavior of validating uploaded files.
+   * By default, files are not validated
+   * @type {(files: ReadonlyArray<File>) => ReadonlyArray<File>}
    */
   export let validateFiles = (files) => files;
 
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 0177aa98..ca6c06a6 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -11,7 +11,7 @@
 
   /**
    * Set the multiselect items
-   * @type {MultiSelectItem[]}
+   * @type {ReadonlyArray<MultiSelectItem>}
    */
   export let items = [];
 
@@ -29,7 +29,7 @@
 
   /**
    * Set the selected ids
-   * @type {MultiSelectItemId[]}
+   * @type {ReadonlyArray<MultiSelectItemId>}
    */
   export let selectedIds = [];
 
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index 5738ae1c..948c9270 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -47,7 +47,7 @@
 
   /**
    * Specify the available page sizes
-   * @type {number[]}
+   * @type {ReadonlyArray<number>}
    */
   export let pageSizes = [10];
 
diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index 3ca0c7fb..d9c1e668 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -22,13 +22,13 @@
 
   /**
    * Set the node ids to be selected
-   * @type {TreeNodeId[]}
+   * @type {ReadonlyArray<TreeNodeId>}
    */
   export let selectedIds = [];
 
   /**
    * Set the node ids to be expanded
-   * @type {TreeNodeId[]}
+   * @type {ReadonlyArray<TreeNodeId>}
    */
   export let expandedIds = [];
 
diff --git a/src/UIShell/HeaderSearch.svelte b/src/UIShell/HeaderSearch.svelte
index a806fe5a..7d101f99 100644
--- a/src/UIShell/HeaderSearch.svelte
+++ b/src/UIShell/HeaderSearch.svelte
@@ -19,7 +19,7 @@
 
   /**
    * Render a list of search results
-   * @type {HeaderSearchResult[]}
+   * @type {ReadonlyArray<HeaderSearchResult>}
    */
   export let results = [];
 
diff --git a/tests/ContextMenu.test.svelte b/tests/ContextMenu.test.svelte
index 393af1e4..0832e6ce 100644
--- a/tests/ContextMenu.test.svelte
+++ b/tests/ContextMenu.test.svelte
@@ -9,13 +9,16 @@
   import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
   import Cut from "carbon-icons-svelte/lib/Cut.svelte";
 
+  let ref: HTMLElement;
   let selectedId = "0";
   let selectedIds = [];
 
   $: console.log("selectedId", selectedId);
 </script>
 
-<ContextMenu open on:open="{(e) => console.log(e.detail)}">
+<div bind:this="{ref}"></div>
+
+<ContextMenu target="{null}" open on:open="{(e) => console.log(e.detail)}">
   <ContextMenuOption
     kind="danger"
     indented
@@ -42,7 +45,7 @@
   </ContextMenuGroup>
 </ContextMenu>
 
-<ContextMenu on:open on:close>
+<ContextMenu target="{[null, ref]}" on:open on:close>
   <ContextMenuOption indented labelText="Open" />
   <ContextMenuDivider />
   <ContextMenuRadioGroup bind:selectedId labelText="Radio group">
diff --git a/tests/Dropdown.test.svelte b/tests/Dropdown.test.svelte
index 4c420fcf..b0ad3251 100644
--- a/tests/Dropdown.test.svelte
+++ b/tests/Dropdown.test.svelte
@@ -1,16 +1,41 @@
 <script lang="ts">
   import { Dropdown, DropdownSkeleton } from "../types";
+  import type { DropdownProps } from "../types/Dropdown/Dropdown.svelte";
+
+  let items: DropdownProps["items"] = [
+    { id: 0, text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ] as const;
+
+  let itemsWithoutConst = [...items];
+
+  type FieldId = typeof items[number]["id"]; // 'foo' | 'bar' | 'baz'
+
+  export const fieldId: FieldId = "bar";
+
+  // @ts-expect-error
+  $: items[0] = { id: "0", text: "Slack" };
+  $: {
+    // @ts-expect-error
+    items[0] = { id: "0", text: "Slack" };
+  }
+  $: {
+    items = [...items, { id: "3", text: "Email" }];
+    items = items.map((item, index) => {
+      if (index === 0) {
+        return { id: "0", text: "Slack" };
+      }
+      return item;
+    });
+  }
 </script>
 
 <Dropdown
   direction="top"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: 0, text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax', disabled: true },
-  ]}"
+  items="{items}"
   on:select="{(e) => {
     console.log(e.detail.selectedId);
   }}"
@@ -31,11 +56,7 @@
   }}"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items="{itemsWithoutConst}"
 />
 
 <Dropdown
diff --git a/tests/FileUploader.test.svelte b/tests/FileUploader.test.svelte
index e658fed8..cc065d7a 100644
--- a/tests/FileUploader.test.svelte
+++ b/tests/FileUploader.test.svelte
@@ -6,8 +6,15 @@
     FileUploaderItem,
     FileUploaderSkeleton,
   } from "../types";
+  import type { FileUploaderProps } from "../types/FileUploader/FileUploader.svelte";
 
   let fileUploader: FileUploader;
+  let files: FileUploaderProps["files"] = [];
+
+  $: {
+    // @ts-expect-error
+    files[0] = null;
+  }
 
   $: fileUploader?.clearFiles();
 </script>
@@ -27,6 +34,7 @@
   labelDescription="Only JPEG files are accepted."
   accept="{['.jpg', '.jpeg']}"
   status="complete"
+  bind:files
   on:add="{(e) => {
     console.log(e.detail); // File[]
   }}"
diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte
index 720f2a7c..48c9f37e 100644
--- a/tests/MultiSelect.test.svelte
+++ b/tests/MultiSelect.test.svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
   import { MultiSelect } from "../types";
+  import type { MultiSelectProps } from "../types/MultiSelect/MultiSelect.svelte";
+
+  let selectedIds: MultiSelectProps["selectedIds"] = [0];
+
+  $: {
+    // @ts-expect-error
+    selectedIds[0] = [0];
+  }
 </script>
 
 <MultiSelect
@@ -7,6 +15,7 @@
   titleText="Contact"
   label="Select contact methods..."
   hideLabel
+  bind:selectedIds
   items="{[
     { id: 0, text: 'Slack' },
     { id: '1', text: 'Email' },
diff --git a/types/Checkbox/Checkbox.svelte.d.ts b/types/Checkbox/Checkbox.svelte.d.ts
index ad151f07..224b2481 100644
--- a/types/Checkbox/Checkbox.svelte.d.ts
+++ b/types/Checkbox/Checkbox.svelte.d.ts
@@ -18,7 +18,7 @@ export interface CheckboxProps {
    * Specify the bound group
    * @default undefined
    */
-  group?: any[];
+  group?: ReadonlyArray<any>;
 
   /**
    * Specify whether the checkbox is indeterminate
diff --git a/types/ComboBox/ComboBox.svelte.d.ts b/types/ComboBox/ComboBox.svelte.d.ts
index 57cf525a..97361ff7 100644
--- a/types/ComboBox/ComboBox.svelte.d.ts
+++ b/types/ComboBox/ComboBox.svelte.d.ts
@@ -15,7 +15,7 @@ export interface ComboBoxProps
    * Set the combobox items
    * @default []
    */
-  items?: ComboBoxItem[];
+  items?: ReadonlyArray<ComboBoxItem>;
 
   /**
    * Override the display of a combobox item
diff --git a/types/ContextMenu/ContextMenu.svelte.d.ts b/types/ContextMenu/ContextMenu.svelte.d.ts
index c10d3709..fd6c084e 100644
--- a/types/ContextMenu/ContextMenu.svelte.d.ts
+++ b/types/ContextMenu/ContextMenu.svelte.d.ts
@@ -8,7 +8,7 @@ export interface ContextMenuProps
    * If no element is specified, the context menu applies to the entire window
    * @default null
    */
-  target?: null | HTMLElement | HTMLElement[];
+  target?: null | ReadonlyArray<null | HTMLElement>;
 
   /**
    * Set to `true` to open the menu
diff --git a/types/ContextMenu/ContextMenuGroup.svelte.d.ts b/types/ContextMenu/ContextMenuGroup.svelte.d.ts
index 13a86ada..16cdc2e6 100644
--- a/types/ContextMenu/ContextMenuGroup.svelte.d.ts
+++ b/types/ContextMenu/ContextMenuGroup.svelte.d.ts
@@ -5,7 +5,7 @@ export interface ContextMenuGroupProps {
   /**
    * @default []
    */
-  selectedIds?: string[];
+  selectedIds?: ReadonlyArray<string>;
 
   /**
    * Specify the label text
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index 2697a314..9a0a588b 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -46,14 +46,14 @@ export interface DataTableProps
    * Specify the data table headers
    * @default []
    */
-  headers?: DataTableHeader[];
+  headers?: ReadonlyArray<DataTableHeader>;
 
   /**
    * Specify the rows the data table should render
    * keys defined in `headers` are used for the row ids
    * @default []
    */
-  rows?: DataTableRow[];
+  rows?: ReadonlyArray<DataTableRow>;
 
   /**
    * Set the size of the data table
@@ -102,13 +102,13 @@ export interface DataTableProps
    * Specify the row ids to be expanded
    * @default []
    */
-  expandedRowIds?: DataTableRowId[];
+  expandedRowIds?: ReadonlyArray<DataTableRowId>;
 
   /**
    * Specify the ids for rows that should not be expandable
    * @default []
    */
-  nonExpandableRowIds?: DataTableRowId[];
+  nonExpandableRowIds?: ReadonlyArray<DataTableRowId>;
 
   /**
    * Set to `true` for the radio selection variant
@@ -133,13 +133,13 @@ export interface DataTableProps
    * Specify the row ids to be selected
    * @default []
    */
-  selectedRowIds?: DataTableRowId[];
+  selectedRowIds?: ReadonlyArray<DataTableRowId>;
 
   /**
    * Specify the ids of rows that should not be selectable
    * @default []
    */
-  nonSelectableRowIds?: DataTableRowId[];
+  nonSelectableRowIds?: ReadonlyArray<DataTableRowId>;
 
   /**
    * Set to `true` to enable a sticky header
diff --git a/types/DataTable/DataTableSkeleton.svelte.d.ts b/types/DataTable/DataTableSkeleton.svelte.d.ts
index e2d01de2..59edd974 100644
--- a/types/DataTable/DataTableSkeleton.svelte.d.ts
+++ b/types/DataTable/DataTableSkeleton.svelte.d.ts
@@ -41,7 +41,7 @@ export interface DataTableSkeletonProps
    * Supersedes `columns` if value is a non-empty array
    * @default []
    */
-  headers?: string[] | Partial<DataTableHeader>[];
+  headers?: ReadonlyArray<string | Partial<DataTableHeader>>;
 
   /**
    * Set to `false` to hide the toolbar
diff --git a/types/Dropdown/Dropdown.svelte.d.ts b/types/Dropdown/Dropdown.svelte.d.ts
index fc2687b1..56457247 100644
--- a/types/Dropdown/Dropdown.svelte.d.ts
+++ b/types/Dropdown/Dropdown.svelte.d.ts
@@ -17,7 +17,7 @@ export interface DropdownProps
    * Set the dropdown items
    * @default []
    */
-  items?: DropdownItem[];
+  items?: ReadonlyArray<DropdownItem>;
 
   /**
    * Override the display of a dropdown item
diff --git a/types/FileUploader/FileUploader.svelte.d.ts b/types/FileUploader/FileUploader.svelte.d.ts
index 2a78fcbd..f6bd0537 100644
--- a/types/FileUploader/FileUploader.svelte.d.ts
+++ b/types/FileUploader/FileUploader.svelte.d.ts
@@ -19,13 +19,13 @@ export interface FileUploaderProps
    * Specify the accepted file types
    * @default []
    */
-  accept?: string[];
+  accept?: ReadonlyArray<string>;
 
   /**
    * Obtain a reference to the uploaded files
    * @default []
    */
-  files?: File[];
+  files?: ReadonlyArray<File>;
 
   /**
    * Set to `true` to allow multiple files
@@ -73,9 +73,9 @@ export interface FileUploaderProps
 export default class FileUploader extends SvelteComponentTyped<
   FileUploaderProps,
   {
-    add: CustomEvent<File[]>;
-    remove: CustomEvent<File[]>;
-    change: CustomEvent<File[]>;
+    add: CustomEvent<ReadonlyArray<File>>;
+    remove: CustomEvent<ReadonlyArray<File>>;
+    change: CustomEvent<ReadonlyArray<File>>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
diff --git a/types/FileUploader/FileUploaderButton.svelte.d.ts b/types/FileUploader/FileUploaderButton.svelte.d.ts
index 5099a2c9..93455956 100644
--- a/types/FileUploader/FileUploaderButton.svelte.d.ts
+++ b/types/FileUploader/FileUploaderButton.svelte.d.ts
@@ -7,13 +7,13 @@ export interface FileUploaderButtonProps
    * Specify the accepted file types
    * @default []
    */
-  accept?: string[];
+  accept?: ReadonlyArray<string>;
 
   /**
    * Obtain a reference to the uploaded files
    * @default []
    */
-  files?: File[];
+  files?: ReadonlyArray<File>;
 
   /**
    * Set to `true` to allow multiple files
@@ -79,7 +79,7 @@ export interface FileUploaderButtonProps
 export default class FileUploaderButton extends SvelteComponentTyped<
   FileUploaderButtonProps,
   {
-    change: CustomEvent<File[]>;
+    change: CustomEvent<ReadonlyArray<File>>;
     keydown: WindowEventMap["keydown"];
     click: WindowEventMap["click"];
   },
diff --git a/types/FileUploader/FileUploaderDropContainer.svelte.d.ts b/types/FileUploader/FileUploaderDropContainer.svelte.d.ts
index 382003cb..e891a735 100644
--- a/types/FileUploader/FileUploaderDropContainer.svelte.d.ts
+++ b/types/FileUploader/FileUploaderDropContainer.svelte.d.ts
@@ -7,13 +7,13 @@ export interface FileUploaderDropContainerProps
    * Specify the accepted file types
    * @default []
    */
-  accept?: string[];
+  accept?: ReadonlyArray<string>;
 
   /**
    * Obtain a reference to the uploaded files
    * @default []
    */
-  files?: File[];
+  files?: ReadonlyArray<File>;
 
   /**
    * Set to `true` to allow multiple files
@@ -22,11 +22,11 @@ export interface FileUploaderDropContainerProps
   multiple?: boolean;
 
   /**
-   * Override the default behavior of validating uploaded files
-   * The default behavior does not validate files
+   * Override the default behavior of validating uploaded files.
+   * By default, files are not validated
    * @default (files) => files
    */
-  validateFiles?: (files: File[]) => File[];
+  validateFiles?: (files: ReadonlyArray<File>) => ReadonlyArray<File>;
 
   /**
    * Specify the label text
@@ -74,8 +74,8 @@ export interface FileUploaderDropContainerProps
 export default class FileUploaderDropContainer extends SvelteComponentTyped<
   FileUploaderDropContainerProps,
   {
-    add: CustomEvent<File[]>;
-    change: CustomEvent<File[]>;
+    add: CustomEvent<ReadonlyArray<File>>;
+    change: CustomEvent<ReadonlyArray<File>>;
     dragover: WindowEventMap["dragover"];
     dragleave: WindowEventMap["dragleave"];
     drop: WindowEventMap["drop"];
diff --git a/types/MultiSelect/MultiSelect.svelte.d.ts b/types/MultiSelect/MultiSelect.svelte.d.ts
index b761a1ec..0673a24f 100644
--- a/types/MultiSelect/MultiSelect.svelte.d.ts
+++ b/types/MultiSelect/MultiSelect.svelte.d.ts
@@ -17,7 +17,7 @@ export interface MultiSelectProps
    * Set the multiselect items
    * @default []
    */
-  items?: MultiSelectItem[];
+  items?: ReadonlyArray<MultiSelectItem>;
 
   /**
    * Override the display of a multiselect item
@@ -39,7 +39,7 @@ export interface MultiSelectProps
    * Set the selected ids
    * @default []
    */
-  selectedIds?: MultiSelectItemId[];
+  selectedIds?: ReadonlyArray<MultiSelectItemId>;
 
   /**
    * Specify the multiselect value
diff --git a/types/Pagination/Pagination.svelte.d.ts b/types/Pagination/Pagination.svelte.d.ts
index 7c2bdd65..e076da7b 100644
--- a/types/Pagination/Pagination.svelte.d.ts
+++ b/types/Pagination/Pagination.svelte.d.ts
@@ -73,7 +73,7 @@ export interface PaginationProps
    * Specify the available page sizes
    * @default [10]
    */
-  pageSizes?: number[];
+  pageSizes?: ReadonlyArray<number>;
 
   /**
    * Set to `true` if the number of pages is unknown
diff --git a/types/TreeView/TreeView.svelte.d.ts b/types/TreeView/TreeView.svelte.d.ts
index f6a41319..f35b8c26 100644
--- a/types/TreeView/TreeView.svelte.d.ts
+++ b/types/TreeView/TreeView.svelte.d.ts
@@ -30,13 +30,13 @@ export interface TreeViewProps
    * Set the node ids to be selected
    * @default []
    */
-  selectedIds?: TreeNodeId[];
+  selectedIds?: ReadonlyArray<TreeNodeId>;
 
   /**
    * Set the node ids to be expanded
    * @default []
    */
-  expandedIds?: TreeNodeId[];
+  expandedIds?: ReadonlyArray<TreeNodeId>;
 
   /**
    * Specify the TreeView size
diff --git a/types/UIShell/HeaderSearch.svelte.d.ts b/types/UIShell/HeaderSearch.svelte.d.ts
index 18604f7c..65dac599 100644
--- a/types/UIShell/HeaderSearch.svelte.d.ts
+++ b/types/UIShell/HeaderSearch.svelte.d.ts
@@ -31,7 +31,7 @@ export interface HeaderSearchProps
    * Render a list of search results
    * @default []
    */
-  results?: HeaderSearchResult[];
+  results?: ReadonlyArray<HeaderSearchResult>;
 
   /**
    * Specify the selected result index