Merge pull request #361 from IBM/datatable

DataTable: add toolbar, toolbar search

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 148 components exported from carbon-components-svelte 0.19.0
+> 152 components exported from carbon-components-svelte 0.19.0
 
 - Accordion
   - [Accordion](#accordion)
@@ -41,6 +41,10 @@
   - [TableHead](#tablehead)
   - [TableHeader](#tableheader)
   - [TableRow](#tablerow)
+  - [Toolbar](#toolbar)
+  - [ToolbarBatchActions](#toolbarbatchactions)
+  - [ToolbarContent](#toolbarcontent)
+  - [ToolbarSearch](#toolbarsearch)
 - [DataTableSkeleton](#datatableskeleton)
 - DatePicker
   - [DatePicker](#datepicker)
@@ -205,7 +209,7 @@ import { Accordion } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -239,7 +243,8 @@ import { AccordionItem } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"title"**: `<div name="title" let:name>...</div>`
 
 ### Forwarded events
 
@@ -306,7 +311,7 @@ import { AspectRatio } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -335,7 +340,7 @@ import { Breadcrumb } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -367,7 +372,7 @@ import { BreadcrumbItem } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -443,7 +448,7 @@ import { Button } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -474,7 +479,7 @@ import { ButtonSet } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -608,7 +613,7 @@ import { ClickableTile } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -655,7 +660,7 @@ import { CodeSnippet } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -740,7 +745,7 @@ type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -831,7 +836,7 @@ import { ComposedModal } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -865,7 +870,7 @@ import { Content } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -895,7 +900,7 @@ import { ContentSwitcher } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -928,7 +933,7 @@ import { Copy } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -980,25 +985,30 @@ import { DataTable } from "carbon-components-svelte";
 
 ### Props
 
-| Prop name      | Type                                                                                             | Default value | Description                                                                                          |
+| Prop name      | Type                                                                                             | Default value | Description                                                                                                      |
-| :------------- | :----------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------- |
+| :------------- | :----------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- |
-| headers        | <code>{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]</code> | `[]`          | Specify the data table headers.                                                                      |
+| headers        | <code>{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]</code> | `[]`          | Specify the data table headers.                                                                                  |
-| rows           | <code>Object[]</code>                                                                            | `[]`          | Specify the rows the data table should render. keys defined in `headers` are used for the row ids.   |
+| rows           | <code>Object[]</code>                                                                            | `[]`          | Specify the rows the data table should render. keys defined in `headers` are used for the row ids.               |
-| size           | <code>"compact" &#124; "short" &#124; "tall"</code>                                              | --            | Set the size of the data table.                                                                      |
+| size           | <code>"compact" &#124; "short" &#124; "tall"</code>                                              | --            | Set the size of the data table.                                                                                  |
-| title          | <code>string</code>                                                                              | `""`          | Specify the title of the data table.                                                                 |
+| title          | <code>string</code>                                                                              | `""`          | Specify the title of the data table.                                                                             |
-| description    | <code>string</code>                                                                              | `""`          | Specify the description of the data table.                                                           |
+| description    | <code>string</code>                                                                              | `""`          | Specify the description of the data table.                                                                       |
-| zebra          | <code>boolean</code>                                                                             | `false`       | Set to `true` to use zebra styles.                                                                   |
+| zebra          | <code>boolean</code>                                                                             | `false`       | Set to `true` to use zebra styles.                                                                               |
-| sortable       | <code>boolean</code>                                                                             | `false`       | Set to `true` for the sortable variant.                                                              |
+| sortable       | <code>boolean</code>                                                                             | `false`       | Set to `true` for the sortable variant.                                                                          |
-| expandable     | <code>boolean</code>                                                                             | `false`       | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. |
+| expandable     | <code>boolean</code>                                                                             | `false`       | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`.             |
-| batchExpansion | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable batch expansion.                                                             |
+| batchExpansion | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable batch expansion.                                                                         |
-| expandedRowIds | <code>string[]</code>                                                                            | `[]`          | Specify the row ids to be expanded.                                                                  |
+| expandedRowIds | <code>string[]</code>                                                                            | `[]`          | Specify the row ids to be expanded.                                                                              |
-| stickyHeader   | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable a sticky header.                                                             |
+| radio          | <code>boolean</code>                                                                             | `false`       | Set to `true` for the radio selection variant.                                                                   |
+| selectable     | <code>boolean</code>                                                                             | `false`       | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. |
+| batchSelection | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable batch selection.                                                                         |
+| selectedRowIds | <code>string[]</code>                                                                            | `[]`          | Specify the row ids to be selected.                                                                              |
+| stickyHeader   | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable a sticky header.                                                                         |
 
 ### Slots
 
-- `<slot name="cell-header">...</slot>`
+- **default**: `<div>...</div>`
-- `<slot name="cell">...</slot>`
+- **"cell-header"**: `<div name="cell-header" let:name let:header>...</div>`
-- `<slot name="expanded-row">...</slot>`
+- **"cell"**: `<div name="cell" let:name let:row let:cell>...</div>`
+- **"expanded-row"**: `<div name="expanded-row" let:name let:row>...</div>`
 
 ### Forwarded events
 
@@ -1010,6 +1020,8 @@ No forwarded events.
 - `on:click`
 - `on:click:header`
 - `on:click:row`
+- `on:mouseenter:row`
+- `on:mouseleave:row`
 - `on:click:row--expand`
 - `on:click:cell`
 
@@ -1077,7 +1089,7 @@ import { DatePicker } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1279,8 +1291,8 @@ import { ExpandableTile } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot name="above">...</slot>`
+- **"above"**: `<div name="above" let:name>...</div>`
-- `<slot name="below">...</slot>`
+- **"below"**: `<div name="below" let:name>...</div>`
 
 ### Forwarded events
 
@@ -1538,7 +1550,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1564,7 +1576,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1599,7 +1611,7 @@ import { FormGroup } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1628,7 +1640,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1659,7 +1671,7 @@ import { FormLabel } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1696,7 +1708,7 @@ import { Grid } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1730,7 +1742,9 @@ import { Header } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"skip-to-content"**: `<div name="skip-to-content" let:name>...</div>`
+- **"platform"**: `<div name="platform" let:name>...</div>`
 
 ### Forwarded events
 
@@ -1761,7 +1775,8 @@ import { HeaderAction } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"text"**: `<div name="text" let:name>...</div>`
 
 ### Forwarded events
 
@@ -1852,7 +1867,7 @@ import { HeaderGlobalAction } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1880,7 +1895,7 @@ import { HeaderNav } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1949,7 +1964,7 @@ import { HeaderNavMenu } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -1982,7 +1997,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2011,7 +2026,7 @@ import { HeaderPanelLink } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2037,7 +2052,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2063,7 +2078,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2196,7 +2211,8 @@ import { InlineNotification } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"actions"**: `<div name="actions" let:name>...</div>`
 
 ### Forwarded events
 
@@ -2231,7 +2247,7 @@ import { Link } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2268,7 +2284,7 @@ import { ListBox } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2309,7 +2325,7 @@ type ListBoxFieldTranslationId = "close" | "open";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2343,7 +2359,7 @@ import { ListBoxMenu } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2408,7 +2424,7 @@ import { ListBoxMenuItem } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2474,7 +2490,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2555,7 +2571,9 @@ import { Modal } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"label"**: `<div name="label" let:name>...</div>`
+- **"heading"**: `<div name="heading" let:name>...</div>`
 
 ### Forwarded events
 
@@ -2591,7 +2609,7 @@ import { ModalBody } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2624,7 +2642,7 @@ import { ModalFooter } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2658,7 +2676,7 @@ import { ModalHeader } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2750,7 +2768,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2848,7 +2866,7 @@ import { NotificationTextDetails } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -2902,7 +2920,7 @@ type NumberInputTranslationId = "increment" | "decrement";
 
 ### Slots
 
-- `<slot name="label">...</slot>`
+- **"label"**: `<div name="label" let:name>...</div>`
 
 ### Forwarded events
 
@@ -2965,7 +2983,7 @@ import { OrderedList } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3004,7 +3022,8 @@ import { OverflowMenu } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"menu"**: `<div name="menu" let:name>...</div>`
 
 ### Forwarded events
 
@@ -3044,7 +3063,7 @@ import { OverflowMenuItem } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3236,7 +3255,7 @@ import { ProgressIndicator } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3306,7 +3325,7 @@ import { ProgressStep } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3378,7 +3397,7 @@ import { RadioButtonGroup } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3444,7 +3463,7 @@ import { RadioTile } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3482,7 +3501,7 @@ import { Row } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3533,6 +3552,8 @@ No slots.
 - `on:mouseleave`
 - `on:change`
 - `on:input`
+- `on:focus`
+- `on:blur`
 
 ### Dispatched events
 
@@ -3601,7 +3622,7 @@ import { Select } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3661,7 +3682,7 @@ import { SelectItemGroup } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3728,7 +3749,7 @@ import { SelectableTile } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3762,7 +3783,7 @@ import { SideNav } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3788,7 +3809,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3851,7 +3872,7 @@ import { SideNavMenu } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -3974,7 +3995,7 @@ import { SkipToContent } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4082,7 +4103,7 @@ import { StructuredList } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4111,7 +4132,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4143,7 +4164,7 @@ import { StructuredListCell } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4172,7 +4193,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4238,7 +4259,7 @@ import { StructuredListRow } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4306,7 +4327,7 @@ import { Switch } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4343,7 +4364,7 @@ import { Tab } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4373,7 +4394,7 @@ import { TabContent } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4406,7 +4427,7 @@ import { Table } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4432,7 +4453,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4458,7 +4479,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4491,7 +4512,7 @@ import { TableContainer } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4517,7 +4538,7 @@ No exported props.
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4550,7 +4571,7 @@ import { TableHeader } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4575,13 +4596,11 @@ import { TableRow } from "carbon-components-svelte";
 
 ### Props
 
-| Prop name  | Type                 | Default value | Description                      |
+No exported props.
-| :--------- | :------------------- | :------------ | :------------------------------- |
-| isSelected | <code>boolean</code> | `false`       | Set to `true` to select the row. |
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4615,7 +4634,8 @@ import { Tabs } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"content"**: `<div name="content" let:name>...</div>`
 
 ### Forwarded events
 
@@ -4680,7 +4700,7 @@ import { Tag } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4903,7 +4923,7 @@ import { Tile } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4936,7 +4956,7 @@ import { TileGroup } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -4977,7 +4997,7 @@ import { TimePicker } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -5019,7 +5039,7 @@ import { TimePickerSelect } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -5059,7 +5079,7 @@ import { ToastNotification } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -5220,6 +5240,123 @@ No dispatched events.
 
 ---
 
+## Toolbar
+
+### Import path
+
+```js
+import { Toolbar } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type                               | Default value | Description               |
+| :-------- | :--------------------------------- | :------------ | :------------------------ |
+| size      | <code>"sm" &#124; "default"</code> | `"default"`   | Specify the toolbar size. |
+
+### Slots
+
+- **default**: `<div>...</div>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToolbarBatchActions
+
+### Import path
+
+```js
+import { ToolbarBatchActions } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name           | Type                                           | Default value | Description                             |
+| :------------------ | :--------------------------------------------- | :------------ | :-------------------------------------- |
+| formatTotalSelected | <code>(totalSelected: number) => string</code> | --            | Override the total items selected text. |
+
+### Slots
+
+- **default**: `<div>...</div>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToolbarContent
+
+### Import path
+
+```js
+import { ToolbarContent } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- **default**: `<div>...</div>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToolbarSearch
+
+### Import path
+
+```js
+import { ToolbarSearch } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name  | Type                                      | Default value | Description                                    |
+| :--------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
+| value      | <code>string</code>                       | `""`          | Specify the value of the search input.         |
+| expanded   | <code>boolean</code>                      | `false`       | Set to `true` to expand the search bar.        |
+| persistent | <code>boolean</code>                      | `false`       | Set to `true` to keep the search bar expanded. |
+| tabindex   | <code>string</code>                       | `"0"`         | Specify the tabindex.                          |
+| ref        | <code>null &#124; HTMLInputElement</code> | `null`        | Obtain a reference to the input HTML element.  |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:change`
+- `on:input`
+- `on:focus`
+- `on:blur`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
 ## Tooltip
 
 ### Import path
@@ -5248,7 +5385,9 @@ import { Tooltip } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"triggerText"**: `<div name="triggerText" let:name>...</div>`
+- **"icon"**: `<div name="icon" let:name>...</div>`
 
 ### Forwarded events
 
@@ -5280,7 +5419,8 @@ import { TooltipDefinition } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"tooltip"**: `<div name="tooltip" let:name>...</div>`
 
 ### Forwarded events
 
@@ -5316,7 +5456,7 @@ import { TooltipIcon } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 
@@ -5348,7 +5488,7 @@ import { UnorderedList } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot>...</slot>`
+- **default**: `<div>...</div>`
 
 ### Forwarded events
 

docs/src/components/ComponentApi.svelte

@@ -120,7 +120,9 @@
       </StructuredListBody>
     </StructuredList>
   </div>
-{:else}No props.{/if}
+{:else}
+  <p class="my-layout-01-03">No props.</p>
+{/if}
 <h3 id="slots">Slots</h3>
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">

docs/src/pages/components/DataTable.svx

@@ -1,5 +1,9 @@
+---
+components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarBatchActions"]
+---
+
 <script>
-  import { DataTable, DataTableSkeleton, Link } from "carbon-components-svelte";
+  import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, Button, Link } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
   import Preview from "../../components/Preview.svelte";
 </script>
@@ -188,6 +192,130 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
+### With toolbar
+
+<DataTable title="Load balancers" description="Your organization's active load balancers."
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+>
+  <Toolbar>
+    <ToolbarContent>
+      <ToolbarSearch />
+      <Button>Create</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>
+
+### With toolbar (small size)
+
+<DataTable size="short" title="Load balancers" description="Your organization's active load balancers."
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+>
+  <Toolbar size="sm">
+    <ToolbarContent>
+      <ToolbarSearch />
+      <Button>Create</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>
+
 ### Zebra stripes
 
 <DataTable zebra
@@ -463,6 +591,23 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
+
+### Selectable
+
+<FileSource src="/framed/DataTable/SelectableDataTable" />
+
+### Initial selected rows
+
+<FileSource src="/framed/DataTable/DataTableBatchSelection" />
+
+### Selectable with batch actions
+
+<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
+
+### Selectable (radio)
+
+<FileSource src="/framed/DataTable/RadioSelectableDataTable" />
+
 ### Expandable
 
 <DataTable expandable

docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [rows[0].id, rows[1].id];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable
+  batchSelection
+  bind:selectedRowIds
+  headers="{headers}"
+  rows="{rows}"
+/>

docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte

@@ -0,0 +1,42 @@
+<script>
+  import {
+    DataTable,
+    Toolbar,
+    ToolbarContent,
+    ToolbarSearch,
+    ToolbarBatchActions,
+    Button,
+  } from "carbon-components-svelte";
+  import Save16 from "carbon-icons-svelte/lib/Save16";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [rows[0].id, rows[1].id];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
+  <Toolbar>
+    <ToolbarBatchActions>
+      <Button icon="{Save16}">Save</Button>
+    </ToolbarBatchActions>
+    <ToolbarContent>
+      <ToolbarSearch />
+      <Button>Create</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>

docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [rows[1].id];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />

docs/src/pages/framed/DataTable/SelectableDataTable.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />

scripts/rollup/generate-index.js

@@ -77,13 +77,15 @@ export function generateIndex(components, groups, pkg) {
 
     if (slots.size > 0) {
       if (slots.get("default")) {
-        code += "- `<slot>...</slot>`\n";
+        code += "- **default**: `<div>...</div>`\n";
-      } else {
-        slots.forEach((slot, name) => {
-          if (slot.default) return;
-          code += `- \`<slot name="${name}">...</slot>\`\n`;
-        });
       }
+
+      slots.forEach((slot, name) => {
+        if (slot.default) return;
+        code += `- **"${name}"**: \`<div name="${name}" ${slot.attributes
+          .map((attr) => `let:${attr.name}`)
+          .join(" ")}>...</div>\`\n`;
+      });
     } else {
       code += "No slots.\n\n";
     }

src/Checkbox/InlineCheckbox.svelte

@@ -0,0 +1,43 @@
+<script>
+  /**
+   * Specify whether the checkbox is checked
+   * @type {boolean} [checked=false]
+   */
+  export let checked = false;
+
+  /**
+   * Specify whether the checkbox is indeterminate
+   * @type {boolean} [indeterminate=false]
+   */
+  export let indeterminate = false;
+
+  /**
+   * Specify the title attribute for the label element
+   * @type {string} [title]
+   */
+  export let title = undefined;
+
+  /**
+   * Set an id for the input label
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+</script>
+
+<input
+  type="checkbox"
+  class:bx--checkbox="{true}"
+  checked="{indeterminate ? false : checked}"
+  indeterminate="{indeterminate}"
+  id="{id}"
+  {...$$restProps}
+  aria-label="{undefined}"
+  aria-checked="{indeterminate ? 'mixed' : checked}"
+  on:change
+/>
+<label
+  for="{id}"
+  title="{title}"
+  aria-label="{$$props['aria-label']}"
+  class:bx--checkbox-label="{true}"
+></label>

src/Checkbox/index.js

@@ -1,2 +1,3 @@
 export { default as Checkbox } from "./Checkbox.svelte";
 export { default as CheckboxSkeleton } from "./Checkbox.Skeleton.svelte";
+export { default as InlineCheckbox } from "./InlineCheckbox.svelte";

src/DataTable/DataTable.svelte

@@ -61,6 +61,31 @@
    */
   export let expandedRowIds = [];
 
+  /**
+   * Set to `true` for the radio selection variant
+   * @type {boolean} [radio=false]
+   */
+  export let radio = false;
+
+  /**
+   * Set to `true` for the selectable variant
+   * Automatically set to `true` if `radio` or `batchSelection` are `true`
+   * @type {boolean} [selectable=false]
+   */
+  export let selectable = false;
+
+  /**
+   * Set to `true` to enable batch selection
+   * @type {boolean} [batchSelection=false]
+   */
+  export let batchSelection = false;
+
+  /**
+   * Specify the row ids to be selected
+   * @type {string[]} [selectedRowIds=[]]
+   */
+  export let selectedRowIds = [];
+
   /**
    * Set to `true` to enable a sticky header
    * @type {boolean} [stickyHeader=false]
@@ -70,6 +95,8 @@
   import { createEventDispatcher, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
   import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import { InlineCheckbox } from "../Checkbox";
+  import { RadioButton } from "../RadioButton";
   import Table from "./Table.svelte";
   import TableBody from "./TableBody.svelte";
   import TableCell from "./TableCell.svelte";
@@ -84,6 +111,7 @@
     descending: "none",
   };
   const dispatch = createEventDispatcher();
+  const batchSelectedIds = writable(false);
   const tableSortable = writable(sortable);
   const sortHeader = writable({
     id: null,
@@ -101,6 +129,10 @@
   setContext("DataTable", {
     sortHeader,
     tableSortable,
+    batchSelectedIds,
+    resetSelectedRowIds: () => {
+      selectedRowIds = [];
+    },
     add: (id) => {
       headerItems.update((_) => [..._, id]);
     },
@@ -113,7 +145,13 @@
     (a, id) => ({ ...a, [id]: true }),
     {}
   );
+
+  let selectAll = false;
+  $: batchSelectedIds.set(selectedRowIds);
+  $: indeterminate =
+    selectedRowIds.length > 0 && selectedRowIds.length < rows.length;
   $: if (batchExpansion) expandable = true;
+  $: if (radio || batchSelection) selectable = true;
   $: tableSortable.set(sortable);
   $: headerKeys = headers.map(({ key }) => key);
   $: rows = rows.map((row) => ({
@@ -149,6 +187,7 @@
 </script>
 
 <TableContainer title="{title}" description="{description}" {...$$restProps}>
+  <slot />
   <Table
     zebra="{zebra}"
     size="{size}"
@@ -179,6 +218,32 @@
             {/if}
           </th>
         {/if}
+        {#if selectable && !batchSelection}
+          <th scope="col"></th>
+        {/if}
+        {#if batchSelection && !radio}
+          <th scope="col" class:bx--table-column-checkbox="{true}">
+            <InlineCheckbox
+              aria-label="Select all rows"
+              checked="{selectAll}"
+              indeterminate="{indeterminate}"
+              on:change="{(e) => {
+                if (indeterminate) {
+                  e.target.checked = false;
+                  selectAll = false;
+                  selectedRowIds = [];
+                  return;
+                }
+
+                if (e.target.checked) {
+                  selectedRowIds = rows.map((row) => row.id);
+                } else {
+                  selectedRowIds = [];
+                }
+              }}"
+            />
+          </th>
+        {/if}
         {#each headers as header, i (header.key)}
           <TableHeader
             on:click="{() => {
@@ -203,11 +268,18 @@
     <TableBody>
       {#each sorting ? sortedRows : rows as row, i (row.id)}
         <TableRow
-          class="{expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable ? 'bx--parent-row' : ''} {expandable && parentRowId === row.id ? 'bx--expandable-row--hover' : ''}"
+          id="row-{row.id}"
+          class="{selectedRowIds.includes(row.id) ? 'bx--data-table--selected' : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable ? 'bx--parent-row' : ''} {expandable && parentRowId === row.id ? 'bx--expandable-row--hover' : ''}"
           on:click="{() => {
             dispatch('click', { row });
             dispatch('click:row', row);
           }}"
+          on:mouseenter="{() => {
+            dispatch('mouseenter:row', row);
+          }}"
+          on:mouseleave="{() => {
+            dispatch('mouseleave:row', row);
+          }}"
         >
           {#if expandable}
             <TableCell
@@ -234,6 +306,34 @@
               </button>
             </TableCell>
           {/if}
+          {#if selectable}
+            <td
+              class:bx--table-column-checkbox="{true}"
+              class:bx--table-column-radio="{radio}"
+            >
+              {#if radio}
+                <RadioButton
+                  name="select-row-{row.id}"
+                  checked="{selectedRowIds.includes(row.id)}"
+                  on:change="{() => {
+                    selectedRowIds = [row.id];
+                  }}"
+                />
+              {:else}
+                <InlineCheckbox
+                  name="select-row-{row.id}"
+                  checked="{selectedRowIds.includes(row.id)}"
+                  on:change="{() => {
+                    if (selectedRowIds.includes(row.id)) {
+                      selectedRowIds = selectedRowIds.filter((id) => id !== row.id);
+                    } else {
+                      selectedRowIds = [...selectedRowIds, row.id];
+                    }
+                  }}"
+                />
+              {/if}
+            </td>
+          {/if}
           {#each row.cells as cell, j (cell.key)}
             <TableCell
               on:click="{() => {

src/DataTable/TableRow.svelte

@@ -1,20 +1,3 @@
-<script>
+<tr {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
-  /**
-   * Set to `true` to select the row
-   * @type {boolean} [isSelected=false]
-   */
-  export let isSelected = false;
-
-  // TODO: include ariaLabel, isSelected
-</script>
-
-<tr
-  class:bx--data-table--selected="{isSelected}"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
->
   <slot />
 </tr>

src/DataTable/Toolbar.svelte

@@ -0,0 +1,19 @@
+<script>
+  /**
+   * Specify the toolbar size
+   * @type {"sm" | "default"} [size="default"]
+   */
+  export let size = "default";
+</script>
+
+<section
+  aria-label="data table toolbar"
+  class:bx--table-toolbar="{true}"
+  class:bx--table-toolbar--small="{size === 'sm'}"
+  class:bx--table-toolbar--normal="{size === 'default'}"
+  {...$$restProps}
+>
+  <div class:bx--toolbar-content="{true}">
+    <slot />
+  </div>
+</section>

src/DataTable/ToolbarBatchActions.svelte

@@ -0,0 +1,44 @@
+<script>
+  /**
+   * Override the total items selected text
+   * @type {(totalSelected: number) => string} [formatTotalSelected = (totalSelected: number) => string]
+   */
+  export let formatTotalSelected = (totalSelected) =>
+    `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
+
+  import { onMount, getContext } from "svelte";
+  import { Button } from "../Button";
+
+  let batchSelectedIds = [];
+
+  $: showActions = batchSelectedIds.length > 0;
+
+  const ctx = getContext("DataTable");
+  const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
+    batchSelectedIds = value;
+  });
+
+  onMount(() => unsubscribe);
+</script>
+
+<div
+  class:bx--batch-actions="{true}"
+  class:bx--batch-actions--active="{showActions}"
+  {...$$restProps}
+>
+  <div class:bx--batch-summary="{true}">
+    <p class:bx--batch-summary__para="{true}">
+      <span> {formatTotalSelected(batchSelectedIds.length)} </span>
+    </p>
+  </div>
+  <div class:bx--action-list="{true}">
+    <slot />
+    <Button
+      class="bx--batch-summary__cancel"
+      tabindex="{showActions ? '0' : '-1'}"
+      on:click="{ctx.resetSelectedRowIds}"
+    >
+      Cancel
+    </Button>
+  </div>
+</div>

src/DataTable/ToolbarContent.svelte

@@ -0,0 +1,3 @@
+<div class:bx--toolbar-content="{true}">
+  <slot />
+</div>

src/DataTable/ToolbarSearch.svelte

@@ -0,0 +1,67 @@
+<script>
+  /**
+   * Specify the value of the search input
+   * @type {string} [value=""]
+   */
+  export let value = "";
+
+  /**
+   * Set to `true` to expand the search bar
+   * @type {boolean} [expanded=false]
+   */
+  export let expanded = false;
+
+  /**
+   * Set to `true` to keep the search bar expanded
+   * @type {boolean} [persistent=false]
+   */
+  export let persistent = false;
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
+  export let tabindex = "0";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
+  export let ref = null;
+
+  import { tick } from "svelte";
+  import { Search } from "../Search";
+
+  async function expandSearch() {
+    if (persistent || expanded) return;
+    expanded = true;
+    await tick();
+    ref.focus();
+  }
+</script>
+
+<div
+  tabindex="{expanded ? '-1' : tabindex}"
+  class:bx--toolbar-action="{true}"
+  class:bx--toolbar-search-container-active="{expanded}"
+  class:bx--toolbar-search-container-expandable="{!persistent}"
+  class:bx--toolbar-search-container-persistent="{persistent}"
+  on:click="{expandSearch}"
+  on:focus="{expandSearch}"
+>
+  <Search
+    size="sm"
+    tabindex="{expanded ? tabindex : '-1'}"
+    aria-hidden="{!expanded}"
+    {...$$restProps}
+    bind:ref
+    bind:value
+    on:change
+    on:input
+    on:focus
+    on:blur
+    on:blur="{() => {
+      expanded = !persistent && !!value.length;
+    }}"
+  />
+</div>

src/DataTable/index.js

@@ -6,3 +6,7 @@ export { default as TableContainer } from "./TableContainer.svelte";
 export { default as TableHead } from "./TableHead.svelte";
 export { default as TableHeader } from "./TableHeader.svelte";
 export { default as TableRow } from "./TableRow.svelte";
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as ToolbarContent } from "./ToolbarContent.svelte";
+export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
+export { default as ToolbarBatchActions } from "./ToolbarBatchActions.svelte";

src/Search/Search.svelte

@@ -32,7 +32,7 @@
 
   /**
    * Specify the value of the search input
-   * @type {string} [value="text"]
+   * @type {string} [value=""]
    */
   export let value = "";
 
@@ -124,11 +124,14 @@
       placeholder="{placeholder}"
       type="{type}"
       value="{value}"
+      aria-hidden="{$$props['aria-hidden']}"
       on:change
       on:input
       on:input="{({ target }) => {
         value = target.value;
       }}"
+      on:focus
+      on:blur
     />
     <button
       type="button"

src/index.js

@@ -23,6 +23,10 @@ export {
   TableHead,
   TableHeader,
   TableRow,
+  Toolbar,
+  ToolbarContent,
+  ToolbarSearch,
+  ToolbarBatchActions,
 } from "./DataTable";
 export { DataTableSkeleton } from "./DataTableSkeleton";
 export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";

types/index.d.ts

@@ -849,6 +849,31 @@ export class DataTable extends CarbonSvelteComponent {
      */
     expandedRowIds?: string[];
 
+    /**
+     * Set to `true` for the radio selection variant
+     * @default false
+     */
+    radio?: boolean;
+
+    /**
+     * Set to `true` for the selectable variant
+     * Automatically set to `true` if `radio` or `batchSelection` are `true`
+     * @default false
+     */
+    selectable?: boolean;
+
+    /**
+     * Set to `true` to enable batch selection
+     * @default false
+     */
+    batchSelection?: boolean;
+
+    /**
+     * Specify the row ids to be selected
+     * @default []
+     */
+    selectedRowIds?: string[];
+
     /**
      * Set to `true` to enable a sticky header
      * @default false
@@ -857,6 +882,7 @@ export class DataTable extends CarbonSvelteComponent {
   };
 
   $$slot_def: {
+    default: {};
     "cell-header": { header: any };
     cell: { row: any; cell: any };
     "expanded-row": { row: any };
@@ -4394,14 +4420,6 @@ export class TableHeader extends CarbonSvelteComponent {
 }
 
 export class TableRow extends CarbonSvelteComponent {
-  $$prop_def: {
-    /**
-     * Set to `true` to select the row
-     * @default false
-     */
-    isSelected?: boolean;
-  };
-
   $$slot_def: { default: {} };
 }
 
@@ -5078,6 +5096,67 @@ export class ToggleSmallSkeleton extends CarbonSvelteComponent {
   };
 }
 
+export class Toolbar extends CarbonSvelteComponent {
+  $$prop_def: {
+    /**
+     * Specify the toolbar size
+     * @default "default"
+     */
+    size?: "sm" | "default";
+  };
+
+  $$slot_def: { default: {} };
+}
+
+export class ToolbarBatchActions extends CarbonSvelteComponent {
+  $$prop_def: {
+    /**
+     * Override the total items selected text
+     */
+    formatTotalSelected?: (totalSelected: number) => string;
+  };
+
+  $$slot_def: { default: {} };
+}
+
+export class ToolbarContent extends CarbonSvelteComponent {
+  $$slot_def: { default: {} };
+}
+
+export class ToolbarSearch extends CarbonSvelteComponent {
+  $$prop_def: {
+    /**
+     * Specify the value of the search input
+     * @default ""
+     */
+    value?: string;
+
+    /**
+     * Set to `true` to expand the search bar
+     * @default false
+     */
+    expanded?: boolean;
+
+    /**
+     * Set to `true` to keep the search bar expanded
+     * @default false
+     */
+    persistent?: boolean;
+
+    /**
+     * Specify the tabindex
+     * @default "0"
+     */
+    tabindex?: string;
+
+    /**
+     * Obtain a reference to the input HTML element
+     * @default null
+     */
+    ref?: null | HTMLInputElement;
+  };
+}
+
 export class Tooltip extends CarbonSvelteComponent {
   $$prop_def: {
     /**