chore: format files with Prettier 3

tests/Accordion.test.svelte

@@ -210,9 +210,9 @@
 
 <Accordion skeleton align="start" />
 
-<Accordion skeleton count="{3}" />
+<Accordion skeleton count={3} />
 
-<Accordion skeleton open="{false}" />
+<Accordion skeleton open={false} />
 
 <Accordion skeleton size="xl" />
 

tests/Breadcrumb.test.svelte

@@ -13,4 +13,4 @@
   <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
 </Breadcrumb>
 
-<Breadcrumb noTrailingSlash skeleton count="{3}" />
+<Breadcrumb noTrailingSlash skeleton count={3} />

tests/Breadcrumbs.test.svelte

@@ -7,17 +7,19 @@
     { href: "/reports/2019", text: "2019" },
   ];
 
-  import { Row, Column, Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
+  import {
+    Row,
+    Column,
+    Breadcrumb,
+    BreadcrumbItem,
+  } from "carbon-components-svelte";
 </script>
 
 <Row>
   <Column>
     <Breadcrumb>
       {#each items as item, i}
-        <BreadcrumbItem
-          href="{item.href}"
-          isCurrentPage="{i === items.length - 1}"
-        >
+        <BreadcrumbItem href={item.href} isCurrentPage={i === items.length - 1}>
           {item.text}
         </BreadcrumbItem>
       {/each}

tests/Breakpoint.test.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { Breakpoint, breakpointObserver, breakpoints } from "carbon-components-svelte";
+  import {
+    Breakpoint,
+    breakpointObserver,
+    breakpoints,
+  } from "carbon-components-svelte";
   import type { BreakpointProps } from "carbon-components-svelte/Breakpoint/Breakpoint.svelte";
 
   let size: BreakpointProps["size"];
@@ -15,10 +19,10 @@
 
 <Breakpoint
   bind:size
-  let:size="{currentSize}"
-  on:change="{(e) => {
+  let:size={currentSize}
+  on:change={(e) => {
     console.log(e.detail);
-  }}"
+  }}
 >
   {currentSize}
 </Breakpoint>

tests/Button.test.svelte

@@ -17,10 +17,10 @@
 
 <Button kind="danger-ghost">Danger ghost button</Button>
 
-<Button icon="{Add}">With icon</Button>
+<Button icon={Add}>With icon</Button>
 
 <Button
-  icon="{Add}"
+  icon={Add}
   tooltipPosition="bottom"
   tooltipAlignment="center"
   iconDescription="Tooltip text"

tests/ButtonSet.test.svelte

@@ -9,6 +9,6 @@
 </ButtonSet>
 
 <ButtonSet stacked>
-  <Button icon="{Login}">Log in</Button>
+  <Button icon={Login}>Log in</Button>
   <Button kind="ghost">Sign up</Button>
 </ButtonSet>

tests/CodeSnippet.test.svelte

@@ -4,7 +4,7 @@
 
 <CodeSnippet
   type="inline"
-  copy="{(text) => text}"
+  copy={(text) => text}
   code=""
   hideCopyButton
   disabled

tests/ComboBox.test.svelte

@@ -15,25 +15,25 @@
 </script>
 
 <ComboBox
-  bind:this="{ref}"
+  bind:this={ref}
   direction="top"
   titleText="Contact"
   placeholder="Select contact method"
-  items="{items}"
-  on:select="{(e) => {
+  {items}
+  on:select={(e) => {
     console.log(e.detail.selectedId);
-  }}"
-  on:clear="{(e) => {
+  }}
+  on:clear={(e) => {
     console.log(e.detail);
-  }}"
-  translateWithId="{(id) => {
+  }}
+  translateWithId={(id) => {
     console.log(id); // "open" | "close"
     return id;
-  }}"
-  translateWithIdSelection="{(id) => {
+  }}
+  translateWithIdSelection={(id) => {
     console.log(id); // "clearSelection"
     return id;
-  }}"
+  }}
   let:item
   let:index
 >
@@ -45,33 +45,33 @@
   titleText="Contact"
   placeholder="Select contact method"
   selectedId="1"
-  items="{items}"
+  {items}
 />
 
 <ComboBox
   light
   titleText="Contact"
   placeholder="Select contact method"
-  items="{items}"
+  {items}
 />
 
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
   size="xl"
-  items="{items}"
+  {items}
 />
 
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
   size="sm"
-  items="{items}"
+  {items}
 />
 
 <ComboBox
   disabled
   titleText="Contact"
   placeholder="Select contact method"
-  items="{items}"
+  {items}
 />

tests/ComposedModal.test.svelte

@@ -17,10 +17,10 @@
   </ModalBody>
   <ModalFooter
     primaryButtonText="Proceed"
-    primaryButtonDisabled="{!checked}"
-    secondaryButtons="{[{ text: 'Cancel' }, { text: 'Duplicate' }]}"
-    on:click:button--secondary="{({ detail }) => {
+    primaryButtonDisabled={!checked}
+    secondaryButtons={[{ text: "Cancel" }, { text: "Duplicate" }]}
+    on:click:button--secondary={({ detail }) => {
       console.log(detail);
-    }}"
+    }}
   />
 </ComposedModal>

tests/ContentSwitcher.test.svelte

@@ -3,7 +3,7 @@
   import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
 </script>
 
-<ContentSwitcher size="xl" selectedIndex="{1}">
+<ContentSwitcher size="xl" selectedIndex={1}>
   <Switch disabled text="Latest news" />
   <Switch text="Trending" />
   <Switch>

tests/ContextMenu.test.svelte

@@ -17,23 +17,20 @@
   $: console.log("selectedId", selectedId);
 </script>
 
-<div bind:this="{ref}"></div>
+<div bind:this={ref}></div>
 
-<ContextMenu target="{null}" open on:open="{(e) => console.log(e.detail)}">
+<ContextMenu target={null} open on:open={(e) => console.log(e.detail)}>
   <ContextMenuOption
     kind="danger"
     indented
     labelText="Copy"
     shortcutText="⌘C"
-    icon="{CopyFile}"
+    icon={CopyFile}
   />
-  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
+  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
-    <ContextMenuGroup
-      labelText="Export options"
-      bind:selectedIds="{selectedIds}"
-    >
+    <ContextMenuGroup labelText="Export options" bind:selectedIds>
       <ContextMenuOption id="pdf" labelText="PDF" />
       <ContextMenuOption id="txt" labelText="TXT" />
       <ContextMenuOption id="mp3" labelText="MP3" />
@@ -49,10 +46,10 @@
   </ContextMenuGroup>
 </ContextMenu>
 
-<ContextMenu target="{[null, ref]}" on:open on:close>
+<ContextMenu target={[null, ref]} on:open on:close>
   <ContextMenuOption indented labelText="Open" />
   <ContextMenuDivider />
-  <ContextMenuRadioGroup bind:selectedId="{selectedId}" labelText="Radio group">
+  <ContextMenuRadioGroup bind:selectedId labelText="Radio group">
     <ContextMenuOption id="0" labelText="Set as foreground" />
     <ContextMenuOption id="1" labelText="Set as background" />
   </ContextMenuRadioGroup>

tests/CopyButton.test.svelte

@@ -6,6 +6,6 @@
   text="text"
   on:click
   on:copy
-  copy="{(text) => text}"
+  copy={(text) => text}
   feedback="Copied to clipboard"
 />

tests/CopyableCodeSnippet.test.svelte

@@ -5,4 +5,4 @@
   import { CodeSnippet } from "carbon-components-svelte";
 </script>
 
-<CodeSnippet on:click="{() => copy(code)}">{code}</CodeSnippet>
+<CodeSnippet on:click={() => copy(code)}>{code}</CodeSnippet>

tests/DangerModal.test.svelte

@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
+<Button kind="danger" on:click={() => (open = true)}>Delete all</Button>
 
 <Modal
   danger
@@ -12,7 +12,7 @@
   modalHeading="Delete all instances"
   primaryButtonText="Delete"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (open = false)}"
+  on:click:button--secondary={() => (open = false)}
   on:open
   on:close
   on:submit

tests/DataTable.test.svelte

@@ -73,15 +73,15 @@
 </script>
 
 <DataTable
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
   style=""
   sortKey="name"
   sortDirection="descending"
   class="class"
 />
 
-<DataTable headers="{headers}" rows="{rows}">
+<DataTable {headers} {rows}>
   <span slot="cell-header" let:header>
     {#if header.key === "port"}
       {header.value}
@@ -105,24 +105,24 @@
 <DataTable
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
   useStaticWidth
 />
 
 <DataTable
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
 >
   <Toolbar>
     <ToolbarContent>
       <ToolbarSearch
-        bind:filteredRowIds="{filteredRowIds}"
-        shouldFilterRows="{(row, value) => {
+        bind:filteredRowIds
+        shouldFilterRows={(row, value) => {
           return row.name.includes(value);
-        }}"
+        }}
       />
       <ToolbarMenu>
         <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
@@ -140,8 +140,8 @@
   size="short"
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
 >
   <Toolbar size="sm">
     <ToolbarContent>
@@ -158,90 +158,85 @@
   </Toolbar>
 </DataTable>
 
-<DataTable zebra headers="{headers}" rows="{rows}" />
+<DataTable zebra {headers} {rows} />
 
-<DataTable size="tall" headers="{headers}" rows="{rows}" />
+<DataTable size="tall" {headers} {rows} />
 
-<DataTable size="short" headers="{headers}" rows="{rows}" />
+<DataTable size="short" {headers} {rows} />
 
-<DataTable size="compact" headers="{headers}" rows="{rows}" />
+<DataTable size="compact" {headers} {rows} />
 
-<DataTable sortable headers="{headers}" rows="{rows}" />
+<DataTable sortable {headers} {rows} />
 
 <DataTable
   sortable
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'cost', value: 'Cost', display: (cost) => cost + ' €' },
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "cost", value: "Cost", display: (cost) => cost + " €" },
     {
-      key: 'expireDate',
-      value: 'Expire date',
+      key: "expireDate",
+      value: "Expire date",
       display: (date) => new Date(date).toLocaleString(),
       sort,
     },
-  ]}"
-  rows="{[
+  ]}
+  rows={[
     {
       id: 0,
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
       cost: 100,
-      expireDate: '2020-10-21',
+      expireDate: "2020-10-21",
     },
     {
-      id: 'b',
-      name: 'Load Balancer 1',
-      protocol: 'HTTP',
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
       port: 443,
       cost: 200,
-      expireDate: '2020-09-10',
+      expireDate: "2020-09-10",
     },
     {
-      id: 'c',
-      name: 'Load Balancer 2',
-      protocol: 'HTTP',
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
       port: 80,
       cost: 150,
-      expireDate: '2020-11-24',
+      expireDate: "2020-11-24",
     },
     {
-      id: 'd',
-      name: 'Load Balancer 6',
-      protocol: 'HTTP',
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
       port: 3000,
       cost: 250,
-      expireDate: '2020-12-01',
+      expireDate: "2020-12-01",
     },
     {
-      id: 'e',
-      name: 'Load Balancer 4',
-      protocol: 'HTTP',
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
       port: 443,
       cost: 550,
-      expireDate: '2021-03-21',
+      expireDate: "2021-03-21",
     },
     {
-      id: 'f',
-      name: 'Load Balancer 5',
-      protocol: 'HTTP',
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
       port: 80,
       cost: 400,
-      expireDate: '2020-11-14',
+      expireDate: "2020-11-14",
     },
-  ]}"
+  ]}
 />
 
-<DataTable
-  expandable
-  nonExpandableRowIds="{['a', 'b']}"
-  headers="{headers}"
-  rows="{rows}"
->
+<DataTable expandable nonExpandableRowIds={["a", "b"]} {headers} {rows}>
   <div slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
@@ -249,7 +244,7 @@
   </div>
 </DataTable>
 
-<DataTable batchExpansion headers="{headers}" rows="{rows}">
+<DataTable batchExpansion {headers} {rows}>
   <div slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
@@ -259,60 +254,57 @@
 
 <DataTableSkeleton />
 
-<DataTableSkeleton
-  headers="{['Name', 'Protocol', 'Port', 'Rule']}"
-  rows="{10}"
-/>
+<DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
 
 <DataTableSkeleton
-  headers="{[
-    { value: 'Name' },
-    { value: 'Protocol' },
-    { value: 'Port' },
-    { value: 'Rule' },
+  headers={[
+    { value: "Name" },
+    { value: "Protocol" },
+    { value: "Port" },
+    { value: "Rule" },
     { empty: true },
-  ]}"
-  rows="{10}"
+  ]}
+  rows={10}
 />
 
-<DataTableSkeleton headers="{headers}" rows="{10}" />
+<DataTableSkeleton {headers} rows={10} />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
+<DataTableSkeleton showHeader={false} showToolbar={false} />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="short" />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
 
 <DataTable
-  rows="{[
+  rows={[
     {
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
-      id: '-',
+      rule: "Round robin",
+      id: "-",
     },
-  ]}"
-  headers="{[
+  ]}
+  headers={[
     {
-      key: 'name',
-      value: 'Name',
+      key: "name",
+      value: "Name",
     },
     {
-      key: 'protocol',
-      value: 'Protocol',
+      key: "protocol",
+      value: "Protocol",
       display: (value) => {
-        return value + ' Protocol';
+        return value + " Protocol";
       },
     },
     {
-      key: 'port',
-      value: 'Port',
+      key: "port",
+      value: "Port",
       display: (value, row) => {
         console.log(row.port);
-        return value + ' €';
+        return value + " €";
       },
       sort: (a, b) => {
         if (a > b) return 1;
@@ -320,31 +312,31 @@
       },
     },
     {
-      key: 'rule',
-      value: 'Rule',
+      key: "rule",
+      value: "Rule",
     },
-  ]}"
+  ]}
   sortKey="name"
-  on:click:row="{(e) => {
+  on:click:row={(e) => {
     const detail = e.detail;
     detail.name;
     detail.port;
-  }}"
-  on:click:cell="{(e) => {
+  }}
+  on:click:cell={(e) => {
     const detail = e.detail;
     switch (detail.key) {
-      case 'name':
+      case "name":
         detail.value;
         break;
     }
-  }}"
-  on:click="{(e) => {
+  }}
+  on:click={(e) => {
     e.detail.cell;
     e.detail.row?.name;
-  }}"
-  on:click:row--expand="{(e) => {
+  }}
+  on:click:row--expand={(e) => {
     const detail = e.detail;
     detail.row.id;
     detail.row.name;
-  }}"
+  }}
 />

tests/DataTableAppendColumns.test.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { DataTable, OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+  import {
+    DataTable,
+    OverflowMenu,
+    OverflowMenuItem,
+  } from "carbon-components-svelte";
 
   const headers = [
     { key: "name", value: "Name" },
@@ -18,7 +22,7 @@
   ];
 </script>
 
-<DataTable sortable headers="{headers}" rows="{rows}">
+<DataTable sortable {headers} {rows}>
   <span slot="cell" let:cell>
     {#if cell.key === "overflow"}
       <OverflowMenu flipped>

tests/DataTableBatchSelection.test.svelte

@@ -21,9 +21,4 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable
-  batchSelection
-  bind:selectedRowIds
-  headers="{headers}"
-  rows="{rows}"
-/>
+<DataTable batchSelection bind:selectedRowIds {headers} {rows} />

tests/DataTableBatchSelectionToolbar.test.svelte

@@ -31,10 +31,10 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
+<DataTable batchSelection bind:selectedRowIds {headers} {rows}>
   <Toolbar>
     <ToolbarBatchActions>
-      <Button icon="{Save}">Save</Button>
+      <Button icon={Save}>Save</Button>
     </ToolbarBatchActions>
     <ToolbarContent>
       <ToolbarSearch />

tests/DataTableNestedHeaders.test.svelte

@@ -3,21 +3,21 @@
 </script>
 
 <DataTable
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol', width: '400px', minWidth: '40%' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule.name', value: 'Rule', sort: false },
-  ]}"
-  rows="{[
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" },
+    { key: "port", value: "Port" },
+    { key: "rule.name", value: "Rule", sort: false },
+  ]}
+  rows={[
     {
-      id: 'a',
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
-      'rule.name': 'Round robin',
+      "rule.name": "Round robin",
     },
-  ]}"
+  ]}
 >
   <span slot="cell" let:cell let:row>
     {cell.key === "rule.name"}

tests/DatePicker.test.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-  import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
+  import {
+    DatePicker,
+    DatePickerSkeleton,
+    DatePickerInput,
+  } from "carbon-components-svelte";
   import { Russian } from "flatpickr/dist/l10n/ru.js";
 </script>
 
 <DatePicker
-  locale="{Russian}"
+  locale={Russian}
   datePickerType="single"
-  flatpickrProps="{{ static: true }}"
+  flatpickrProps={{ static: true }}
   on:change
 >
   <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" on:paste />
@@ -14,9 +18,9 @@
 
 <DatePicker
   locale="az"
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail);
-  }}"
+  }}
 >
   <DatePickerInput
     labelText="Date of birth"

tests/Dropdown.test.svelte

@@ -10,7 +10,7 @@
 
   let itemsWithoutConst = [...items];
 
-  type FieldId = typeof items[number]["id"]; // 'foo' | 'bar' | 'baz'
+  type FieldId = (typeof items)[number]["id"]; // 'foo' | 'bar' | 'baz'
 
   export const fieldId: FieldId = "bar";
 
@@ -33,14 +33,14 @@
   direction="top"
   titleText="Contact"
   selectedId="0"
-  items="{items}"
-  on:select="{(e) => {
+  {items}
+  on:select={(e) => {
     console.log(e.detail.selectedId);
-  }}"
-  translateWithId="{(id) => {
+  }}
+  translateWithId={(id) => {
     console.log(id); // "open" | "close"
     return id;
-  }}"
+  }}
   let:item
   let:index
 >
@@ -49,67 +49,67 @@
 </Dropdown>
 
 <Dropdown
-  itemToString="{(item) => {
-    return item.text + ' (' + item.id + ')';
-  }}"
+  itemToString={(item) => {
+    return item.text + " (" + item.id + ")";
+  }}
   titleText="Contact"
   selectedId="0"
-  items="{itemsWithoutConst}"
+  items={itemsWithoutConst}
 />
 
 <Dropdown
   light
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <Dropdown
   type="inline"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <Dropdown
   size="xl"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <Dropdown
   size="sm"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <Dropdown
   disabled
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <DropdownSkeleton />

tests/DynamicCodeSnippet.test.svelte

@@ -7,4 +7,4 @@
   $: code = Array.from({ length }, (_, i) => i + 1).join("\n");
 </script>
 
-<CodeSnippet type="multi" code="{code}" />
+<CodeSnippet type="multi" {code} />

tests/FileUploader.test.svelte

@@ -23,31 +23,31 @@
   kind="tertiary"
   size="xl"
   labelText="Add files"
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // File[]
-  }}"
+  }}
 />
 
 <FileUploader
   kind="danger-ghost"
   size="lg"
-  bind:this="{fileUploader}"
+  bind:this={fileUploader}
   multiple
   labelTitle="Upload files"
   buttonLabel="Add files"
   labelDescription="Only JPEG files are accepted."
-  accept="{['.jpg', '.jpeg']}"
+  accept={[".jpg", ".jpeg"]}
   status="complete"
   bind:files
-  on:add="{(e) => {
+  on:add={(e) => {
     console.log(e.detail); // File[]
-  }}"
-  on:remove="{(e) => {
+  }}
+  on:remove={(e) => {
     console.log(e.detail); // File[]
-  }}"
-  on:change="{(e) => {
+  }}
+  on:change={(e) => {
     console.log(e.detail); // File[]
-  }}"
+  }}
 />
 
 <FileUploaderItem name="README.md" status="uploading" />

tests/FilterableComboBox.test.svelte

@@ -10,10 +10,10 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
-  shouldFilterItem="{shouldFilterItem}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
+  {shouldFilterItem}
 />

tests/FluidForm.test.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { FluidForm, TextInput, PasswordInput } from "carbon-components-svelte";
+  import {
+    FluidForm,
+    TextInput,
+    PasswordInput,
+  } from "carbon-components-svelte";
 </script>
 
 <FluidForm action="" method="get">

tests/HeaderNav.test.svelte

@@ -36,7 +36,7 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />

tests/HeaderSearch.svelte

@@ -18,7 +18,7 @@
     Row,
     Column,
   } from "carbon-components-svelte";
-    import type { ComponentProps } from "svelte";
+  import type { ComponentProps } from "svelte";
 
   let isSideNavOpen = false;
   let isOpen = false;
@@ -65,15 +65,15 @@
       bind:active
       bind:value
       bind:selectedResultIndex
-      results="{results}"
+      {results}
       on:active
       on:inactive
-      on:clear="{() => {
-        console.log('on:clear');
-      }}"
-      on:select="{(e) => {
-        console.log('on:select', e.detail);
-      }}"
+      on:clear={() => {
+        console.log("on:clear");
+      }}
+      on:select={(e) => {
+        console.log("on:select", e.detail);
+      }}
       on:paste
       let:result
       let:index
@@ -95,7 +95,7 @@
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />

tests/HeaderSwitcher.test.svelte

@@ -27,7 +27,7 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderAction bind:isOpen transition="{false}">
+    <HeaderAction bind:isOpen transition={false}>
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@@ -42,7 +42,7 @@
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />

tests/HeaderUtilities.test.svelte

@@ -30,12 +30,12 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" />
+    <HeaderGlobalAction iconDescription="Settings" icon={SettingsAdjust} />
     <HeaderAction
       bind:isOpen
       on:open
       on:close
-      transition="{{ duration: 400, easing: quintOut }}"
+      transition={{ duration: 400, easing: quintOut }}
     >
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
@@ -51,7 +51,7 @@
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />

tests/HiddenCodeSnippet.test.svelte

@@ -10,16 +10,16 @@
   <h5>"Show more" will not render</h5>
   <br />
 {/if}
-<div class:hidden="{!toggled}">
-  <CodeSnippet type="multi" code="{code}" />
+<div class:hidden={!toggled}>
+  <CodeSnippet type="multi" {code} />
 </div>
 
 {#if toggled}
   <br /><br />
   <h5>"Show more" will render</h5>
   <br />
-  <div class:hidden="{!toggled}">
-    <CodeSnippet type="multi" code="{code}" />
+  <div class:hidden={!toggled}>
+    <CodeSnippet type="multi" {code} />
   </div>
 {/if}
 

tests/ImageLoader.test.svelte

@@ -13,10 +13,10 @@
   fadeIn
   ratio="16x9"
   src=""
-  on:load="{(e) => {
+  on:load={(e) => {
     console.log(e.detail); // null
-  }}"
-  on:error="{(e) => {
+  }}
+  on:error={(e) => {
     console.log(e.detail); // null
-  }}"
+  }}
 />

tests/InlineLoadingUx.test.svelte

@@ -19,7 +19,7 @@
   } as const satisfies Record<State, State>;
 
   let timeout: NodeJS.Timeout | undefined = undefined;
-  let state: State= "dormant";
+  let state: State = "dormant";
 
   function reset(incomingState?: State) {
     if (typeof timeout === "number") {
@@ -41,14 +41,14 @@
 <ButtonSet>
   <Button
     kind="ghost"
-    disabled="{state === 'dormant' || state === 'finished'}"
-    on:click="{() => (state = 'inactive')}"
+    disabled={state === "dormant" || state === "finished"}
+    on:click={() => (state = "inactive")}
   >
     Cancel
   </Button>
   {#if state !== "dormant"}
-    <InlineLoading status="{state}" description="{descriptionMap[state]}" />
+    <InlineLoading status={state} description={descriptionMap[state]} />
   {:else}
-    <Button on:click="{() => (state = 'active')}">Submit</Button>
+    <Button on:click={() => (state = "active")}>Submit</Button>
   {/if}
 </ButtonSet>

tests/InlineNotification.test.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { InlineNotification, NotificationActionButton } from "carbon-components-svelte";
+  import {
+    InlineNotification,
+    NotificationActionButton,
+  } from "carbon-components-svelte";
 </script>
 
 <InlineNotification on:close />
@@ -8,9 +11,9 @@
   hideCloseButton
   kind="warning"
   title="Upcoming scheduled maintenance"
-  on:close="{(e) => {
+  on:close={(e) => {
     console.log(e.detail.timeout);
-  }}"
+  }}
 />
 
 <InlineNotification kind="warning" title="Upcoming scheduled maintenance">

tests/Loading.test.svelte

@@ -2,6 +2,6 @@
   import { Loading } from "carbon-components-svelte";
 </script>
 
-<Loading withOverlay="{false}" />
+<Loading withOverlay={false} />
 
-<Loading withOverlay="{false}" small />
+<Loading withOverlay={false} small />

tests/LocalStorage.test.svelte

@@ -10,13 +10,13 @@
 </script>
 
 <LocalStorage
-  bind:this="{storage}"
+  bind:this={storage}
   key="dark-mode"
-  bind:value="{toggled}"
-  on:save="{() => {
-    events = [...events, { event: 'on:save' }];
-  }}"
-  on:update="{({ detail }) => {
-    events = [...events, { event: 'on:update', detail }];
-  }}"
+  bind:value={toggled}
+  on:save={() => {
+    events = [...events, { event: "on:save" }];
+  }}
+  on:update={({ detail }) => {
+    events = [...events, { event: "on:update", detail }];
+  }}
 />

tests/Modal.test.svelte

@@ -4,18 +4,18 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
-  secondaryButtons="{[{ text: 'Cancel' }, { text: 'Duplicate' }]}"
+  secondaryButtons={[{ text: "Cancel" }, { text: "Duplicate" }]}
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{({ detail }) => {
+  on:click:button--secondary={({ detail }) => {
     console.log(detail);
     open = false;
-  }}"
+  }}
   on:open
   on:close
   on:submit

tests/MultiSelect.test.svelte

@@ -16,28 +16,28 @@
   label="Select contact methods..."
   hideLabel
   bind:selectedIds
-  items="{[
-    { id: 0, text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax', disabled: true },
-  ]}"
-  on:select="{(e) => {
+  items={[
+    { id: 0, text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax", disabled: true },
+  ]}
+  on:select={(e) => {
     console.log(e.detail.selectedIds);
     console.log(e.detail.selected);
     console.log(e.detail.unselected);
-  }}"
-  on:blur="{(e) => {
+  }}
+  on:blur={(e) => {
     e.detail; // number | FocusEvent
-  }}"
+  }}
   on:paste
-  translateWithId="{(id) => {
+  translateWithId={(id) => {
     console.log(id); // "open" | "close"
     return id;
-  }}"
-  translateWithIdSelection="{(id) => {
+  }}
+  translateWithIdSelection={(id) => {
     console.log(id); // "clearAll" | "clearSelection"
     return id;
-  }}"
+  }}
   let:item
   let:index
 >
@@ -48,93 +48,93 @@
 <MultiSelect
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
-  sortItem="{() => {}}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
+  sortItem={() => {}}
 />
 
 <MultiSelect
-  selectedIds="{['0', '1']}"
+  selectedIds={["0", "1"]}
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
-  itemToString="{(item) => {
-    return item.text + ' (' + item.id + ')';
-  }}"
+  itemToString={(item) => {
+    return item.text + " (" + item.id + ")";
+  }}
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
-  sortItem="{() => {}}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
+  sortItem={() => {}}
 />
 
 <MultiSelect
   light
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
   type="inline"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
   size="xl"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
   size="sm"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
   filterable
-  filterItem="{(item, query) => {
+  filterItem={(item, query) => {
     return item.text.toLowerCase().includes(query.toLowerCase());
-  }}"
+  }}
   titleText="Contact"
   placeholder="Filter contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />

tests/NumberInput.test.svelte

@@ -10,18 +10,18 @@
 <NumberInput
   disabled
   light
-  min="{4}"
-  max="{20}"
-  value="{4}"
+  min={4}
+  max={20}
+  value={4}
   label="Clusters"
   helperText="Clusters provisioned in your region"
   invalidText="Number must be between 4 and 20."
-  on:input="{(e) => {
+  on:input={(e) => {
     console.log({ input: e.detail }); // null | number
-  }}"
-  on:change="{(e) => {
+  }}
+  on:change={(e) => {
     console.log({ change: e.detail }); // null | number
-  }}"
+  }}
   on:keydown
   on:keyup
   on:paste
@@ -30,19 +30,19 @@
 <NumberInput
   disabled
   light
-  min="{1}"
-  max="{10}"
-  value="{4}"
-  step="{0.1}"
+  min={1}
+  max={10}
+  value={4}
+  step={0.1}
   label="Clusters"
   helperText="Clusters provisioned in your region"
   invalidText="Number must be between 1 and 10."
-  on:input="{(e) => {
+  on:input={(e) => {
     console.log({ input: e.detail }); // null | number
-  }}"
-  on:change="{(e) => {
+  }}
+  on:change={(e) => {
     console.log(e.detail); // null | number
-  }}"
+  }}
   on:keydown
   on:keyup
   on:paste

tests/OffsetColumns.test.svelte

@@ -5,25 +5,25 @@
 <Grid>
   <Row>
     <Column
-      sm="{{ span: 1, offset: 3 }}"
+      sm={{ span: 1, offset: 3 }}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       Offset 3
     </Column>
     <Column
-      sm="{{ span: 2, offset: 2 }}"
+      sm={{ span: 2, offset: 2 }}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       Offset 2
     </Column>
     <Column
-      sm="{{ span: 3, offset: 1 }}"
+      sm={{ span: 3, offset: 1 }}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       Offset 1
     </Column>
     <Column
-      sm="{{ span: 4, offset: 0 }}"
+      sm={{ span: 4, offset: 0 }}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       Offset 0

tests/OverflowMenu.test.svelte

@@ -4,9 +4,9 @@
 </script>
 
 <OverflowMenu
-  on:close="{(e) => {
+  on:close={(e) => {
     console.log(e.detail); // { index: number; text: string; }
-  }}"
+  }}
 >
   <OverflowMenuItem text="Manage credentials" />
   <OverflowMenuItem
@@ -61,7 +61,7 @@
   <OverflowMenuItem primaryFocus danger text="Delete service" />
 </OverflowMenu>
 
-<OverflowMenu icon="{Add}">
+<OverflowMenu icon={Add}>
   <OverflowMenuItem text="Manage credentials" />
   <OverflowMenuItem
     href="https://cloud.ibm.com/docs/api-gateway/"

tests/Pagination.test.svelte

@@ -3,22 +3,22 @@
 </script>
 
 <Pagination
-  totalItems="{102}"
-  pageSizes="{[10, 15, 20]}"
-  on:change="{(e) => {
+  totalItems={102}
+  pageSizes={[10, 15, 20]}
+  on:change={(e) => {
     console.log(e.detail); // { pageSize?: number, page?: number }
-  }}"
-  on:update="{(e) => {
+  }}
+  on:update={(e) => {
     console.log(e.detail); // { pageSize: number; page: number; }
-  }}"
+  }}
 />
 
-<Pagination totalItems="{102}" page="{4}" />
+<Pagination totalItems={102} page={4} />
 
-<Pagination totalItems="{102}" pageSizes="{[16, 36, 99]}" pageSize="{36}" />
+<Pagination totalItems={102} pageSizes={[16, 36, 99]} pageSize={36} />
 
-<Pagination totalItems="{102}" pageInputDisabled />
+<Pagination totalItems={102} pageInputDisabled />
 
-<Pagination totalItems="{102}" pageSizeInputDisabled />
+<Pagination totalItems={102} pageSizeInputDisabled />
 
 <PaginationSkeleton />

tests/PaginationNav.test.svelte

@@ -5,15 +5,15 @@
 <PaginationNav />
 
 <PaginationNav
-  total="{3}"
+  total={3}
   loop
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // { page: number; }
-  }}"
-  on:click:button--next="{(e) => {
+  }}
+  on:click:button--next={(e) => {
     console.log(e.detail); // { page: number; }
-  }}"
-  on:click:button--previous="{(e) => {
+  }}
+  on:click:button--previous={(e) => {
     console.log(e.detail); // { page: number; }
-  }}"
+  }}
 />

tests/PassiveModal.test.svelte

@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button kind="tertiary" on:click="{() => (open = true)}">Learn more</Button>
+<Button kind="tertiary" on:click={() => (open = true)}>Learn more</Button>
 
 <Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
   <p>

tests/PersistedHamburgerMenu.test.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <Header
-  persistentHamburgerMenu="{true}"
+  persistentHamburgerMenu={true}
   company="IBM"
   platformName="Carbon Svelte"
   bind:isSideNavOpen
@@ -41,7 +41,7 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />

tests/Popover.test.svelte

@@ -12,9 +12,9 @@
   relative
   light
   highContrast
-  on:click:outside="{() => {
-    console.log('on:click:outside');
-  }}"
+  on:click:outside={() => {
+    console.log("on:click:outside");
+  }}
 >
   <div style="padding: var(--cds-spacing-05)">Content</div>
 </Popover>

tests/ProgressBar.test.svelte

@@ -7,8 +7,8 @@
 <ProgressBar
   kind="inline"
   size="md"
-  value="{40}"
-  max="{100}"
+  value={40}
+  max={100}
   labelText="Upload status"
   hideLabel
   helperText="40 MB of 100 MB"

tests/ProgressIndicator.test.svelte

@@ -6,7 +6,7 @@
   } from "carbon-components-svelte";
 </script>
 
-<ProgressIndicator currentIndex="{2}">
+<ProgressIndicator currentIndex={2}>
   <ProgressStep
     complete
     label="Step 1"
@@ -28,7 +28,7 @@
   />
 </ProgressIndicator>
 
-<ProgressIndicator preventChangeOnClick currentIndex="{2}">
+<ProgressIndicator preventChangeOnClick currentIndex={2}>
   <ProgressStep
     complete
     label="Step 1"
@@ -80,4 +80,4 @@
   />
 </ProgressIndicator>
 
-<ProgressIndicatorSkeleton count="{3}" />
+<ProgressIndicatorSkeleton count={3} />

tests/RadioButton.test.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
-  import { RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "carbon-components-svelte";
+  import {
+    RadioButton,
+    RadioButtonSkeleton,
+    RadioButtonGroup,
+  } from "carbon-components-svelte";
 </script>
 
 <RadioButtonGroup
   legendText="Storage tier (disk)"
   selected="standard"
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // string
-  }}"
+  }}
 >
   <RadioButton labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />

tests/RadioSelectableDataTable.test.svelte

@@ -21,4 +21,4 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />
+<DataTable radio bind:selectedRowIds {headers} {rows} />

tests/RadioTile.test.svelte

@@ -7,9 +7,9 @@
   required
   legend="Service pricing tiers"
   selected="0"
-  on:select="{(e) => {
+  on:select={(e) => {
     console.log(e.detail); // string
-  }}"
+  }}
 >
   <RadioTile light checked value="0">Lite plan</RadioTile>
   <RadioTile value="1">Standard plan</RadioTile>

tests/RecursiveList.test.svelte

@@ -29,4 +29,4 @@
   ];
 </script>
 
-<RecursiveList type="ordered" nodes="{nodes}" />
+<RecursiveList type="ordered" {nodes} />

tests/ResponsiveGrid.test.svelte

@@ -5,33 +5,33 @@
 <Grid>
   <Row>
     <Column
-      sm="{1}"
-      md="{4}"
-      lg="{8}"
+      sm={1}
+      md={4}
+      lg={8}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       sm: 1, md: 4, lg: 8
     </Column>
     <Column
-      sm="{1}"
-      md="{2}"
-      lg="{2}"
+      sm={1}
+      md={2}
+      lg={2}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       sm: 1, md: 2, lg: 2
     </Column>
     <Column
-      sm="{1}"
-      md="{1}"
-      lg="{1}"
+      sm={1}
+      md={1}
+      lg={1}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       sm: 1, md: 1, lg: 1
     </Column>
     <Column
-      sm="{1}"
-      md="{1}"
-      lg="{1}"
+      sm={1}
+      md={1}
+      lg={1}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       sm: 1, md: 1, lg: 1

tests/Select.test.svelte

@@ -14,8 +14,8 @@
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-<Select labelText="Carbon theme" selected="{0}">
-  <SelectItem value="{0}" text="Select a theme" disabled hidden />
+<Select labelText="Carbon theme" selected={0}>
+  <SelectItem value={0} text="Select a theme" disabled hidden />
   <SelectItemGroup label="Light theme">
     <SelectItem value="white" text="White" />
     <SelectItem value="g10" text="Gray 10" />

tests/SelectableDataTable.test.svelte

@@ -21,4 +21,4 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />
+<DataTable selectable bind:selectedRowIds {headers} {rows} />

tests/SkeletonText.test.svelte

@@ -10,6 +10,6 @@
 
 <SkeletonText paragraph />
 
-<SkeletonText paragraph lines="{8}" />
+<SkeletonText paragraph lines={8} />
 
 <SkeletonText paragraph width="50%" />

tests/Slider.test.svelte

@@ -6,36 +6,36 @@
 
 <Slider
   labelText="Runtime memory (MB)"
-  min="{10}"
-  max="{990}"
+  min={10}
+  max={990}
   maxLabel="990 MB"
-  value="{100}"
+  value={100}
   fullWidth
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // number
-  }}"
-  on:input="{(e) => {
+  }}
+  on:input={(e) => {
     console.log(e.detail); // number
-  }}"
+  }}
 />
 
 <Slider
   labelText="Runtime memory (MB)"
-  min="{10}"
-  max="{990}"
+  min={10}
+  max={990}
   maxLabel="990 MB"
-  value="{100}"
-  step="{10}"
+  value={100}
+  step={10}
 />
 
 <Slider
   light
   labelText="Runtime memory (MB)"
-  min="{10}"
-  max="{990}"
+  min={10}
+  max={990}
   maxLabel="990 MB"
-  value="{100}"
-  step="{10}"
+  value={100}
+  step={10}
 />
 
 <SliderSkeleton />

tests/StructuredList.test.svelte

@@ -14,9 +14,9 @@
 <StructuredList
   selection
   selected="row-1-value"
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // string
-  }}"
+  }}
 >
   <StructuredListHead>
     <StructuredListRow head>
@@ -97,4 +97,4 @@
   </StructuredListBody>
 </StructuredList>
 
-<StructuredListSkeleton rows="{3}" />
+<StructuredListSkeleton rows={3} />

tests/Tabs.test.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
-  import { Tabs, Tab, TabContent, TabsSkeleton } from "carbon-components-svelte";
+  import {
+    Tabs,
+    Tab,
+    TabContent,
+    TabsSkeleton,
+  } from "carbon-components-svelte";
 </script>
 
 <Tabs
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // number
-  }}"
+  }}
 >
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
@@ -40,4 +45,4 @@
 
 <TabContent>Content 3</TabContent>
 
-<TabsSkeleton count="{3}" />
+<TabsSkeleton count={3} />

tests/Tag.test.svelte

@@ -31,7 +31,7 @@
 
 <Tag filter on:click on:close>Filterable</Tag>
 
-<Tag icon="{Add}">Custom icon</Tag>
+<Tag icon={Add}>Custom icon</Tag>
 
 <Tag interactive>Text</Tag>
 

tests/TextArea.test.svelte

@@ -6,7 +6,7 @@
   value=""
   hideLabel
   light
-  rows="{10}"
+  rows={10}
   labelText="App description"
   helperText="A rich description helps us better recommend related products and services"
   placeholder="Enter a description..."

tests/TextInput.test.svelte

@@ -10,9 +10,9 @@
   labelText="User name"
   placeholder="Enter user name..."
   bind:value
-  on:input="{(e) => console.log(e.detail)}"
-  on:change="{(e) => (value = e.detail)}"
-  on:paste="{(e) => console.log(e)}"
+  on:input={(e) => console.log(e.detail)}
+  on:change={(e) => (value = e.detail)}
+  on:paste={(e) => console.log(e)}
 />
 
 <TextInput

tests/Theme.test.svelte

@@ -9,16 +9,16 @@
   bind:theme
   persist
   persistKey="carbon-theme"
-  on:update="{(e) => console.log(e.detail.theme)}"
-  tokens="{{ 'button-primary': 'violet' }}"
+  on:update={(e) => console.log(e.detail.theme)}
+  tokens={{ "button-primary": "violet" }}
   render="toggle"
-  toggle="{{
-    themes: ['g10', 'g90'],
-    labelA: '',
-    labelB: '',
-  }}"
-  select="{{
-    themes: ['g10', 'g90'],
-    labelText: '',
-  }}"
+  toggle={{
+    themes: ["g10", "g90"],
+    labelA: "",
+    labelB: "",
+  }}
+  select={{
+    themes: ["g10", "g90"],
+    labelText: "",
+  }}
 />

tests/TimePicker.test.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-  import { TimePicker, TimePickerSelect, SelectItem } from "carbon-components-svelte";
+  import {
+    TimePicker,
+    TimePickerSelect,
+    SelectItem,
+  } from "carbon-components-svelte";
 </script>
 
 <TimePicker
-  spellcheck="{false}"
+  spellcheck={false}
   labelText="Cron job"
   placeholder="hh:mm"
   on:paste

tests/ToastNotification.test.svelte

@@ -8,9 +8,9 @@
   hideCloseButton
   kind="warning"
   title="Upcoming scheduled maintenance"
-  on:close="{(e) => {
+  on:close={(e) => {
     console.log(e.detail.timeout);
-  }}"
+  }}
 />
 
 <ToastNotification kind="error" />

tests/Toggle.test.svelte

@@ -7,9 +7,9 @@
 <Toggle
   labelText="Push notifications"
   toggled
-  on:toggle="{(e) => {
+  on:toggle={(e) => {
     console.log(e.detail.toggled);
-  }}"
+  }}
 />
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />

tests/Tooltip.test.svelte

@@ -41,7 +41,7 @@
 
 <Button size="small">Manage</Button>
 
-<Tooltip triggerText="Resource list" icon="{Catalog}">
+<Tooltip triggerText="Resource list" icon={Catalog}>
   <p>Resources are provisioned based on your account's organization.</p>
 </Tooltip>
 

tests/TreeView.test.svelte

@@ -63,16 +63,16 @@
 </script>
 
 <TreeView
-  bind:this="{treeview}"
+  bind:this={treeview}
   size="compact"
   labelText="Cloud Products"
   {nodes}
   bind:activeId
   bind:selectedIds
   bind:expandedIds
-  on:select="{({ detail }) => console.log('select', detail)}"
-  on:toggle="{({ detail }) => console.log('toggle', detail)}"
-  on:focus="{({ detail }) => console.log('focus', detail)}"
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
   let:node
 >
   {node.id}

tests/Truncate.test.svelte

@@ -16,7 +16,7 @@
   Carbon Components Svelte is a Svelte component library that implements the
   Carbon Design System, an open source design system by IBM.
 </h4>
-<h4 use:truncate="{{ clamp: 'front' }}">
+<h4 use:truncate={{ clamp: "front" }}>
   Carbon Components Svelte is a Svelte component library that implements the
   Carbon Design System, an open source design system by IBM.
 </h4>