chore: format files with Prettier 3

docs/src/pages/framed/Accordion/ExpandableAccordion.svelte

@@ -22,14 +22,14 @@
   let open = false;
 </script>
 
-<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
+<Button kind="ghost" size="field" on:click={() => (open = !open)}>
   {open ? "Collapse" : "Expand"}
   all
 </Button>
 
 <Accordion>
   {#each items as item}
-    <AccordionItem title="{item.title}" open="{open}">
+    <AccordionItem title={item.title} {open}>
       <p>{item.description}</p>
     </AccordionItem>
   {/each}

docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte

@@ -10,7 +10,7 @@
 
 <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}

docs/src/pages/framed/Breakpoint/Breakpoint.svelte

@@ -5,7 +5,7 @@
   let events = [];
 </script>
 
-<Breakpoint bind:size on:change="{(e) => (events = [...events, e.detail])}" />
+<Breakpoint bind:size on:change={(e) => (events = [...events, e.detail])} />
 
 <p>Resize the width of your browser.</p>
 <h6>Breakpoint size</h6>

docs/src/pages/framed/Button/ProgrammaticFocus.svelte

@@ -7,9 +7,9 @@
 <Button bind:ref>Primary button</Button>
 <Button
   kind="ghost"
-  on:click="{() => {
+  on:click={() => {
     ref?.focus();
-  }}"
+  }}
 >
   Click to focus the Primary button
 </Button>

docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte

@@ -8,23 +8,23 @@
 </script>
 
 <Button
-  isSelected="{index === 0}"
+  isSelected={index === 0}
   kind="ghost"
   iconDescription="Bold"
-  icon="{TextBold}"
-  on:click="{() => (index = 0)}"
+  icon={TextBold}
+  on:click={() => (index = 0)}
 />
 <Button
-  isSelected="{index === 1}"
+  isSelected={index === 1}
   kind="ghost"
   iconDescription="Italicize"
-  icon="{TextItalic}"
-  on:click="{() => (index = 1)}"
+  icon={TextItalic}
+  on:click={() => (index = 1)}
 />
 <Button
-  isSelected="{index === 2}"
+  isSelected={index === 2}
   kind="ghost"
   iconDescription="Underline"
-  icon="{TextUnderline}"
-  on:click="{() => (index = 2)}"
+  icon={TextUnderline}
+  on:click={() => (index = 2)}
 />

docs/src/pages/framed/Checkbox/CheckboxReactive.svelte

@@ -7,7 +7,7 @@
 <Checkbox labelText="Label text" bind:checked />
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (checked = !checked)}">Toggle</Button>
+  <Button on:click={() => (checked = !checked)}>Toggle</Button>
 </div>
 
 <strong>checked:</strong>

docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte

@@ -6,11 +6,11 @@
 </script>
 
 {#each values as value}
-  <Checkbox bind:group labelText="{value}" value="{value}" />
+  <Checkbox bind:group labelText={value} {value} />
 {/each}
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
+  <Button on:click={() => (group = ["Banana"])}>Set to ["Banana"]</Button>
 </div>
 
 <strong>Selected:</strong>

docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte

@@ -5,5 +5,5 @@
 
 <CodeSnippet
   code="npm i carbon-components-svelte"
-  copy="{(text) => copy(text)}"
+  copy={(text) => copy(text)}
 />

docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte

@@ -4,16 +4,16 @@
   let expanded = false;
 </script>
 
-<Button on:click="{() => (expanded = !expanded)}">Toggle expansion</Button>
+<Button on:click={() => (expanded = !expanded)}>Toggle expansion</Button>
 
 <CodeSnippet
   type="multi"
-  code="{Array.from({ length: 30 }, (_, i) => i + 1).join('\n')}"
+  code={Array.from({ length: 30 }, (_, i) => i + 1).join("\n")}
   bind:expanded
-  on:expand="{() => {
-    console.log('on:expand');
-  }}"
-  on:collapse="{() => {
-    console.log('on:collapse');
-  }}"
+  on:expand={() => {
+    console.log("on:expand");
+  }}
+  on:collapse={() => {
+    console.log("on:collapse");
+  }}
 />

docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte

@@ -13,4 +13,4 @@
   labelText="Trigger snippet overflow"
   style="margin-bottom: var(--cds-spacing-05)"
 />
-<CodeSnippet type="multi" code="{code}" />
+<CodeSnippet type="multi" {code} />

docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte

@@ -17,16 +17,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}
 

docs/src/pages/framed/ComboBox/ComboBoxClear.svelte

@@ -8,13 +8,13 @@
   titleText="Contact"
   placeholder="Select contact method"
   selectedId="1"
-  bind:this="{ref}"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  bind:this={ref}
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 <br />
-<Button on:click="{ref.clear}">Clear</Button>
-<Button on:click="{() => ref.clear({ focus: false })}">Clear (no focus)</Button>
+<Button on:click={ref.clear}>Clear</Button>
+<Button on:click={() => ref.clear({ focus: false })}>Clear (no focus)</Button>

docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte

@@ -5,11 +5,11 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  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" },
+  ]}
   let:item
   let:index
 >

docs/src/pages/framed/ComboBox/FilterableComboBox.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}
 />

docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte

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

docs/src/pages/framed/ComboBox/MultipleComboBox.svelte

@@ -18,19 +18,19 @@
 </script>
 
 <ComboBox
-  bind:selectedId="{comboBox1_selectedId}"
+  bind:selectedId={comboBox1_selectedId}
   titleText="Primary contact"
   placeholder="Select primary contact method"
-  items="{items}"
+  {items}
 />
 
 <div>Primary: {primary}</div>
 
 <ComboBox
-  bind:selectedId="{comboBox2_selectedId}"
+  bind:selectedId={comboBox2_selectedId}
   titleText="Secondary contact"
   placeholder="Select secondary contact method"
-  items="{items}"
+  {items}
 />
 
 <div>Secondary: {secondary}</div>

docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte

@@ -7,14 +7,14 @@
   titleText="Contact"
   placeholder="Select contact method"
   bind:selectedId
-  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" },
+  ]}
 />
 <br />
-<Button on:click="{() => (selectedId = undefined)}"
+<Button on:click={() => (selectedId = undefined)}
   >Set to undefined (unselected)</Button
 >
-<Button on:click="{() => (selectedId = '2')}">Set to 2 (Fax)</Button>
+<Button on:click={() => (selectedId = "2")}>Set to 2 (Fax)</Button>

docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte

@@ -13,8 +13,8 @@
 <div>
   <Button
     size="small"
-    disabled="{selectedIndex === 2}"
-    on:click="{() => (selectedIndex = 2)}"
+    disabled={selectedIndex === 2}
+    on:click={() => (selectedIndex = 2)}
   >
     Set selected to 2
   </Button>

docs/src/pages/framed/ContextMenu/ContextMenu.svelte

@@ -18,9 +18,9 @@
     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>

docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte

@@ -11,14 +11,14 @@
   let target;
 </script>
 
-<ContextMenu target="{target}" on:open="{(e) => console.log(e.detail)}">
+<ContextMenu {target} on:open={(e) => console.log(e.detail)}>
   <ContextMenuOption
     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">
@@ -40,7 +40,7 @@
 </ContextMenu>
 
 <div>
-  <p bind:this="{target}">Right click this element</p>
+  <p bind:this={target}>Right click this element</p>
 </div>
 
 <style>

docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte

@@ -12,17 +12,14 @@
   let target2;
 </script>
 
-<ContextMenu
-  target="{[target, target2]}"
-  on:open="{(e) => console.log(e.detail)}"
->
+<ContextMenu target={[target, target2]} on:open={(e) => console.log(e.detail)}>
   <ContextMenuOption
     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">
@@ -44,8 +41,8 @@
 </ContextMenu>
 
 <div>
-  <p bind:this="{target}">Right click this element</p>
-  <p bind:this="{target2}">... or this one</p>
+  <p bind:this={target}>Right click this element</p>
+  <p bind:this={target2}>... or this one</p>
 </div>
 
 <style>

docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte

@@ -3,4 +3,4 @@
   import { CopyButton } from "carbon-components-svelte";
 </script>
 
-<CopyButton text="Carbon svelte" copy="{(text) => copy(text)}" />
+<CopyButton text="Carbon svelte" copy={(text) => copy(text)} />

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

@@ -22,7 +22,7 @@
   ];
 </script>
 
-<DataTable sortable headers="{headers}" rows="{rows}">
+<DataTable sortable {headers} {rows}>
   <svelte:fragment slot="cell" let:cell>
     {#if cell.key === "overflow"}
       <OverflowMenu flipped>

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

@@ -9,16 +9,16 @@
 <DataTable
   batchSelection
   bind:selectedRowIds
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 />

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

@@ -9,16 +9,16 @@
 <DataTable
   batchSelection
   bind:selectedRowIds
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 />

docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.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 />

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

@@ -32,32 +32,32 @@
 
 <DataTable
   selectable
-  batchSelection="{active}"
+  batchSelection={active}
   bind:selectedRowIds
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
 >
   <Toolbar>
     <ToolbarBatchActions
       bind:active
-      on:cancel="{(e) => {
+      on:cancel={(e) => {
         e.preventDefault();
         active = false;
-      }}"
+      }}
     >
       <Button
-        icon="{TrashCan}"
-        disabled="{selectedRowIds.length === 0}"
-        on:click="{() => {
+        icon={TrashCan}
+        disabled={selectedRowIds.length === 0}
+        on:click={() => {
           rows = rows.filter((row) => !selectedRowIds.includes(row.id));
           selectedRowIds = [];
-        }}"
+        }}
       >
         Delete
       </Button>
     </ToolbarBatchActions>
     <ToolbarContent>
-      <Button on:click="{() => (active = true)}">Edit rows</Button>
+      <Button on:click={() => (active = true)}>Edit rows</Button>
     </ToolbarContent>
   </Toolbar>
 </DataTable>

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

@@ -15,19 +15,19 @@
   batchSelection
   bind:expandedRowIds
   bind:selectedRowIds
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 >
   <svelte:fragment slot="expanded-row" let:row>
     <pre> {JSON.stringify(row, null, 2)}</pre>

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

@@ -5,57 +5,57 @@
 <DataTable
   zebra
   expandable
-  nonExpandableRowIds="{['a', 'd']}"
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{[
+  nonExpandableRowIds={["a", "d"]}
+  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',
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'b',
-      name: 'Load Balancer 1',
-      protocol: 'HTTP',
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'c',
-      name: 'Load Balancer 2',
-      protocol: 'HTTP',
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
+      rule: "DNS delegation",
     },
     {
-      id: 'd',
-      name: 'Load Balancer 6',
-      protocol: 'HTTP',
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'e',
-      name: 'Load Balancer 4',
-      protocol: 'HTTP',
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'f',
-      name: 'Load Balancer 5',
-      protocol: 'HTTP',
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
+      rule: "DNS delegation",
     },
-  ]}"
+  ]}
 >
   <svelte:fragment slot="expanded-row" let:row>
     <pre>{JSON.stringify(row, null, 2)}</pre>

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

@@ -22,27 +22,27 @@
 </script>
 
 <DataTable
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{rows}"
-  pageSize="{pageSize}"
-  page="{page}"
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {rows}
+  {pageSize}
+  {page}
 >
   <Toolbar>
     <ToolbarContent>
       <ToolbarSearch
         persistent
         value="round"
-        shouldFilterRows="{(row, value) => {
+        shouldFilterRows={(row, value) => {
           return (
             /(6|8)$/.test(row.name) &&
             row.rule.toLowerCase().includes(value.toLowerCase())
           );
-        }}"
+        }}
         bind:filteredRowIds
       />
     </ToolbarContent>
@@ -52,6 +52,6 @@
 <Pagination
   bind:pageSize
   bind:page
-  totalItems="{filteredRowIds.length}"
+  totalItems={filteredRowIds.length}
   pageSizeInputDisabled
 />

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

@@ -22,15 +22,15 @@
 </script>
 
 <DataTable
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{rows}"
-  pageSize="{pageSize}"
-  page="{page}"
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {rows}
+  {pageSize}
+  {page}
 >
   <Toolbar>
     <ToolbarContent>
@@ -47,6 +47,6 @@
 <Pagination
   bind:pageSize
   bind:page
-  totalItems="{filteredRowIds.length}"
+  totalItems={filteredRowIds.length}
   pageSizeInputDisabled
 />

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

@@ -3,17 +3,17 @@
 </script>
 
 <DataTable
-  headers="{[
-    { key: 'name', value: 'Name', width: '50%', minWidth: '200px' },
-    { key: 'protocol', value: 'Protocol', width: '60px' },
-    { key: 'port', value: 'Port', width: '60px' },
-    { key: 'rule', value: 'Rule', width: '10rem' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name", width: "50%", minWidth: "200px" },
+    { key: "protocol", value: "Protocol", width: "60px" },
+    { key: "port", value: "Port", width: "60px" },
+    { key: "rule", value: "Rule", width: "10rem" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 />

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

@@ -49,16 +49,16 @@
 
 <DataTable
   batchExpansion
-  nonExpandableRowIds="{rows
+  nonExpandableRowIds={rows
     .filter((row) => row.port < 3000)
-    .map((row) => row.id)}"
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{rows}"
+    .map((row) => row.id)}
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {rows}
 >
   <svelte:fragment slot="expanded-row" let:row>
     <pre>{JSON.stringify(row, null, 2)}</pre>

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

@@ -49,14 +49,14 @@
 
 <DataTable
   batchSelection
-  nonSelectableRowIds="{rows
+  nonSelectableRowIds={rows
     .filter((row) => row.port === 3000)
-    .map((row) => row.id)}"
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{rows}"
+    .map((row) => row.id)}
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {rows}
 />

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

@@ -16,19 +16,19 @@
   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: 'rule', value: 'Rule' },
-  ]}"
-  pageSize="{pageSize}"
-  page="{page}"
-  rows="{rows}"
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {pageSize}
+  {page}
+  {rows}
 />
 <Pagination
   bind:pageSize
   bind:page
-  totalItems="{rows.length}"
+  totalItems={rows.length}
   pageSizeInputDisabled
 />

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

@@ -10,32 +10,32 @@
 
 <Button
   kind="tertiary"
-  disabled="{sortKey === 'port' && sortDirection === 'ascending'}"
-  on:click="{() => {
-    sortKey = 'port';
-    sortDirection = 'ascending';
-  }}"
+  disabled={sortKey === "port" && sortDirection === "ascending"}
+  on:click={() => {
+    sortKey = "port";
+    sortDirection = "ascending";
+  }}
 >
   Sort "port" in ascending order
 </Button>
 
 <Button
   kind="tertiary"
-  disabled="{sortKey === 'name' && sortDirection === 'descending'}"
-  on:click="{() => {
-    sortKey = 'name';
-    sortDirection = 'descending';
-  }}"
+  disabled={sortKey === "name" && sortDirection === "descending"}
+  on:click={() => {
+    sortKey = "name";
+    sortDirection = "descending";
+  }}
 >
   Sort "name" in descending order
 </Button>
 
 <Button
   kind="ghost"
-  on:click="{() => {
+  on:click={() => {
     sortKey = null;
-    sortDirection = 'none';
-  }}"
+    sortDirection = "none";
+  }}
 >
   Clear sorting
 </Button>
@@ -44,54 +44,54 @@
   sortable
   bind:sortKey
   bind:sortDirection
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol', sort: false },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{[
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol", sort: false },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={[
     {
-      id: 'a',
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'b',
-      name: 'Load Balancer 1',
-      protocol: 'HTTP',
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'c',
-      name: 'Load Balancer 2',
-      protocol: 'HTTP',
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
+      rule: "DNS delegation",
     },
     {
-      id: 'd',
-      name: 'Load Balancer 6',
-      protocol: 'HTTP',
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'e',
-      name: 'Load Balancer 4',
-      protocol: 'HTTP',
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'f',
-      name: 'Load Balancer 5',
-      protocol: 'HTTP',
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
+      rule: "DNS delegation",
     },
-  ]}"
+  ]}
 />

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

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

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

@@ -9,16 +9,16 @@
 <DataTable
   selectable
   bind:selectedRowIds
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 />

docs/src/pages/framed/DatePicker/DatePickerModal.svelte

@@ -9,14 +9,14 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Select date</Button>
+<Button on:click={() => (open = true)}>Select date</Button>
 
 <Modal
   bind:open
   modalHeading="Meeting date"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (open = false)}"
+  on:click:button--secondary={() => (open = false)}
 >
   <DatePicker datePickerType="single" style="min-height: 420px">
     <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />

docs/src/pages/framed/Dropdown/DropdownSlot.svelte

@@ -5,11 +5,11 @@
 <Dropdown
   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" },
+  ]}
   let:item
   let:index
 >

docs/src/pages/framed/Dropdown/MultipleDropdown.svelte

@@ -19,18 +19,18 @@
 
 <Dropdown
   titleText="Primary contact"
-  bind:selectedId="{dropdown1_selectedId}"
-  items="{items}"
+  bind:selectedId={dropdown1_selectedId}
+  {items}
 />
 
 <div>Primary: {primary}</div>
 
 <Dropdown
-  invalid="{dropdown1_selectedId === dropdown2_selectedId}"
+  invalid={dropdown1_selectedId === dropdown2_selectedId}
   invalidText="Secondary contact method must be different from the primary contact"
   titleText="Secondary contact"
-  bind:selectedId="{dropdown2_selectedId}"
-  items="{items}"
+  bind:selectedId={dropdown2_selectedId}
+  {items}
 />
 
 <div>Secondary: {secondary}</div>

docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <FileUploader
-  bind:this="{fileUploader}"
+  bind:this={fileUploader}
   multiple
   labelTitle="Upload files"
   buttonLabel="Add files"
@@ -18,15 +18,11 @@
 
 <Button
   kind="tertiary"
-  disabled="{!files.length}"
-  on:click="{fileUploader.clearFiles}"
+  disabled={!files.length}
+  on:click={fileUploader.clearFiles}
 >
   Clear (programmatic)
 </Button>
-<Button
-  kind="tertiary"
-  disabled="{!files.length}"
-  on:click="{() => (files = [])}"
->
+<Button kind="tertiary" disabled={!files.length} on:click={() => (files = [])}>
   Clear (two-way binding)
 </Button>

docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte

@@ -14,8 +14,8 @@
 <FluidForm>
   <TextInput labelText="User name" placeholder="Enter user name..." required />
   <PasswordInput
-    bind:value="{password}"
-    invalid="{invalid}"
+    bind:value={password}
+    {invalid}
     invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
     required
     type="password"

docs/src/pages/framed/Grid/OffsetColumns.svelte

@@ -4,9 +4,9 @@
 
 <Grid>
   <Row>
-    <Column sm="{{ span: 1, offset: 3 }}">Offset 3</Column>
-    <Column sm="{{ span: 2, offset: 2 }}">Offset 2</Column>
-    <Column sm="{{ span: 3, offset: 1 }}">Offset 1</Column>
-    <Column sm="{{ span: 4, offset: 0 }}">Offset 0</Column>
+    <Column sm={{ span: 1, offset: 3 }}>Offset 3</Column>
+    <Column sm={{ span: 2, offset: 2 }}>Offset 2</Column>
+    <Column sm={{ span: 3, offset: 1 }}>Offset 1</Column>
+    <Column sm={{ span: 4, offset: 0 }}>Offset 0</Column>
   </Row>
 </Grid>

docs/src/pages/framed/Grid/ResponsiveGrid.svelte

@@ -4,9 +4,9 @@
 
 <Grid>
   <Row>
-    <Column sm="{1}" md="{4}" lg="{8}">sm: 1, md: 4, lg: 8</Column>
-    <Column sm="{1}" md="{2}" lg="{2}">sm: 1, md: 2, lg: 2</Column>
-    <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
-    <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
+    <Column sm={1} md={4} lg={8}>sm: 1, md: 4, lg: 8</Column>
+    <Column sm={1} md={2} lg={2}>sm: 1, md: 2, lg: 2</Column>
+    <Column sm={1} md={1} lg={1}>sm: 1, md: 1, lg: 1</Column>
+    <Column sm={1} md={1} lg={1}>sm: 1, md: 1, lg: 1</Column>
   </Row>
 </Grid>

docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte

@@ -13,13 +13,13 @@
 
 <Button
   kind="ghost"
-  on:click="{() => {
+  on:click={() => {
     index = index === 0 ? 1 : 0;
-  }}"
+  }}
 >
   Toggle image
 </Button>
 
 <div style:margin-top="1rem" style:width="100%" style:max-width="120px">
-  <ImageLoader ratio="1x1" fadeIn src="{src}" alt="{src}" />
+  <ImageLoader ratio="1x1" fadeIn {src} alt={src} />
 </div>

docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte

@@ -11,15 +11,15 @@
 
 <Button
   kind="ghost"
-  disabled="{!imageLoader || error}"
-  on:click="{() => imageLoader.loadImage(srcError)}"
+  disabled={!imageLoader || error}
+  on:click={() => imageLoader.loadImage(srcError)}
 >
   Simulate error
 </Button>
 
-<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
+<ImageLoader bind:this={imageLoader} bind:error fadeIn {src}>
   <svelte:fragment slot="error">
-    <Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
+    <Button kind="ghost" on:click={() => imageLoader.loadImage(src)}>
       Error. Try again
     </Button>
   </svelte:fragment>

docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte

@@ -37,14 +37,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>

docs/src/pages/framed/LocalStorage/LocalStorage.svelte

@@ -9,13 +9,13 @@
 
 <LocalStorage
   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 }];
+  }}
 />
 
 <Toggle size="sm" labelText="Dark mode" bind:toggled />

docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte

@@ -7,11 +7,11 @@
   $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
 </script>
 
-<LocalStorage bind:this="{storage}" bind:value="{toggled}" />
+<LocalStorage bind:this={storage} bind:value={toggled} />
 
 <Toggle size="sm" labelText="Dark mode" bind:toggled />
 
 <br />
 <br />
 
-<Button size="small" on:click="{storage.clearAll}">Clear storage</Button>
+<Button size="small" on:click={storage.clearAll}>Clear storage</Button>

docs/src/pages/framed/Modal/3ButtonComposedModal.svelte

@@ -12,20 +12,20 @@
   let checked = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Review changes</Button>
+<Button on:click={() => (open = true)}>Review changes</Button>
 
-<ComposedModal bind:open on:submit="{() => (open = false)}">
+<ComposedModal bind:open on:submit={() => (open = false)}>
   <ModalHeader label="Changes" title="Confirm changes" />
   <ModalBody hasForm>
     <Checkbox labelText="I have reviewed the changes" bind:checked />
   </ModalBody>
   <ModalFooter
     primaryButtonText="Proceed"
-    primaryButtonDisabled="{!checked}"
-    secondaryButtons="{[{ text: 'Cancel' }, { text: 'Review' }]}"
-    on:click:button--secondary="{({ detail }) => {
-      if (detail.text === 'Cancel') open = false;
-      if (detail.text === 'Review') console.log('Review');
-    }}"
+    primaryButtonDisabled={!checked}
+    secondaryButtons={[{ text: "Cancel" }, { text: "Review" }]}
+    on:click:button--secondary={({ detail }) => {
+      if (detail.text === "Cancel") open = false;
+      if (detail.text === "Review") console.log("Review");
+    }}
   />
 </ComposedModal>

docs/src/pages/framed/Modal/3ButtonModal.svelte

@@ -4,17 +4,17 @@
   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: 'Edit' }]}"
-  on:click:button--secondary="{({ detail }) => {
-    if (detail.text === 'Cancel') open = false;
-    if (detail.text === 'Edit') console.log('Edit');
-  }}"
+  secondaryButtons={[{ text: "Cancel" }, { text: "Edit" }]}
+  on:click:button--secondary={({ detail }) => {
+    if (detail.text === "Cancel") open = false;
+    if (detail.text === "Edit") console.log("Edit");
+  }}
   on:open
   on:close
   on:submit

docs/src/pages/framed/Modal/ComposedModal.svelte

@@ -15,5 +15,5 @@
   <ModalBody hasForm>
     <Checkbox labelText="I have reviewed the changes" bind:checked />
   </ModalBody>
-  <ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" />
+  <ModalFooter primaryButtonText="Proceed" primaryButtonDisabled={!checked} />
 </ComposedModal>

docs/src/pages/framed/Modal/DangerModal.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

docs/src/pages/framed/Modal/Modal.svelte

@@ -4,14 +4,14 @@
   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"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (open = false)}"
+  on:click:button--secondary={() => (open = false)}
   on:open
   on:close
   on:submit

docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte

@@ -5,13 +5,13 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   bind:open
   modalHeading="Invite someone"
   primaryButtonText="Send invitation"
-  primaryButtonIcon="{Send}"
+  primaryButtonIcon={Send}
   secondaryButtonText="Cancel"
 >
   <p>Do you really want to invite someone?</p>

docs/src/pages/framed/Modal/ModalCustomFocus.svelte

@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   bind:open
@@ -12,7 +12,7 @@
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
   selectorPrimaryFocus="#db-name"
-  on:click:button--secondary="{() => (open = false)}"
+  on:click:button--secondary={() => (open = false)}
   on:open
   on:close
   on:submit

docs/src/pages/framed/Modal/ModalExtraSmall.svelte

@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   size="xs"

docs/src/pages/framed/Modal/ModalLarge.svelte

@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   size="lg"

docs/src/pages/framed/Modal/ModalMultiple.svelte

@@ -5,17 +5,17 @@
   let openDelete = false;
 </script>
 
-<Button on:click="{() => (openCreate = true)}">Create database</Button>
-<Button kind="danger-tertiary" on:click="{() => (openDelete = true)}">
+<Button on:click={() => (openCreate = true)}>Create database</Button>
+<Button kind="danger-tertiary" on:click={() => (openDelete = true)}>
   Delete database
 </Button>
 
 <Modal
-  bind:open="{openCreate}"
+  bind:open={openCreate}
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (openCreate = false)}"
+  on:click:button--secondary={() => (openCreate = false)}
   on:open
   on:close
   on:submit
@@ -25,11 +25,11 @@
 
 <Modal
   danger
-  bind:open="{openDelete}"
+  bind:open={openDelete}
   modalHeading="Delete database"
   primaryButtonText="Delete"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (openDelete = false)}"
+  on:click:button--secondary={() => (openDelete = false)}
   on:open
   on:close
   on:submit

docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte

@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   preventCloseOnClickOutside

docs/src/pages/framed/Modal/ModalScrollingContent.svelte

@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal bind:open passiveModal modalHeading="About Cloudant" hasScrollingContent>
   <p>

docs/src/pages/framed/Modal/ModalSmall.svelte

@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   size="sm"

docs/src/pages/framed/Modal/PassiveModal.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>

docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte

@@ -5,11 +5,11 @@
 <MultiSelect
   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" },
+  ]}
   let:item
   let:index
 >

docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte

@@ -21,18 +21,18 @@
 
 <MultiSelect
   titleText="Primary contact"
-  bind:selectedIds="{multiselect1_selectedIds}"
+  bind:selectedIds={multiselect1_selectedIds}
   label="Select contact methods..."
-  items="{items}"
+  {items}
 />
 
 <div>Primary: {primary}</div>
 
 <MultiSelect
   titleText="Secondary contact"
-  bind:selectedIds="{multiselect2_selectedIds}"
+  bind:selectedIds={multiselect2_selectedIds}
   label="Select contact methods..."
-  items="{items}"
+  {items}
 />
 
 <div>Secondary: {secondary}</div>

docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte

@@ -7,8 +7,8 @@
 <NumberInput allowEmpty bind:value />
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (value = null)}">Set to null</Button>
-  <Button on:click="{() => (value = 0)}">Set to 0</Button>
+  <Button on:click={() => (value = null)}>Set to null</Button>
+  <Button on:click={() => (value = 0)}>Set to 0</Button>
 </div>
 
 <strong>Value:</strong>

docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte

@@ -7,7 +7,7 @@
 <PaginationNav bind:page />
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (page = 1)}" disabled="{page === 0}">
+  <Button on:click={() => (page = 1)} disabled={page === 0}>
     Set page to 1
   </Button>
 </div>

docs/src/pages/framed/Popover/WithButton.svelte

@@ -5,15 +5,15 @@
   let ref = null;
 </script>
 
-<div bind:this="{ref}" style:position="relative">
-  <Button on:click="{() => (open = !open)}">Toggle popover</Button>
+<div bind:this={ref} style:position="relative">
+  <Button on:click={() => (open = !open)}>Toggle popover</Button>
   <Popover
     bind:open
     align="bottom-left"
-    on:click:outside="{({ detail }) => {
-      console.log('on:click:outside');
+    on:click:outside={({ detail }) => {
+      console.log("on:click:outside");
       open = ref.contains(detail.target);
-    }}"
+    }}
   >
     <div style="padding: var(--cds-spacing-05)">Content</div>
   </Popover>

docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte

@@ -13,18 +13,12 @@
   }
 </script>
 
-<ProgressBar
-  labelText="Upload status"
-  value="{value}"
-  max="{max}"
-  helperText="{helperText}"
-  status="{status}"
-/>
+<ProgressBar labelText="Upload status" {value} {max} {helperText} {status} />
 
 <ButtonSet style="margin-top: var(--cds-spacing-08)">
   <Button
-    disabled="{value > 0}"
-    on:click="{() => {
+    disabled={value > 0}
+    on:click={() => {
       const interval = setInterval(() => {
         const delta = Math.random() * 10;
 
@@ -35,17 +29,17 @@
           clearInterval(interval);
         }
       }, 30);
-    }}"
+    }}
   >
     Start
   </Button>
   <Button
     kind="tertiary"
-    disabled="{value !== max}"
-    on:click="{() => {
+    disabled={value !== max}
+    on:click={() => {
       value = 0;
-      status = 'active';
-    }}"
+      status = "active";
+    }}
   >
     Reset
   </Button>

docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte

@@ -22,7 +22,7 @@
   />
   <ProgressStep
     complete
-    bind:current="{thirdStepCurrent}"
+    bind:current={thirdStepCurrent}
     label="Step 3"
     description="The progress indicator will listen for clicks on the steps"
   />
@@ -34,10 +34,10 @@
 
 <div style="margin: var(--cds-layout-02) 0">
   <Button
-    kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
-    on:click="{() => {
+    kind={currentIndex === 2 ? "secondary" : "primary"}
+    on:click={() => {
       currentIndex = currentIndex === 2 ? 0 : 2;
-    }}"
+    }}
   >
     Set currentIndex to
     {currentIndex === 2 ? 0 : 2}

docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte

@@ -13,10 +13,10 @@
 <RadioButtonGroup
   legendText="Storage tier (disk)"
   name="plan"
-  bind:selected="{plan}"
+  bind:selected={plan}
 >
   {#each plans as value (value)}
-    <RadioButton labelText="{value}" value="{value}" />
+    <RadioButton labelText={value} {value} />
   {/each}
 </RadioButtonGroup>
 
@@ -25,8 +25,8 @@
     <Button
       size="small"
       kind="secondary"
-      disabled="{plan === value}"
-      on:click="{() => (plan = value)}"
+      disabled={plan === value}
+      on:click={() => (plan = value)}
     >
       Select "{value}"
     </Button>

docs/src/pages/framed/RadioTile/RadioTileReactive.svelte

@@ -8,7 +8,7 @@
 
 <TileGroup legend="Service pricing tiers" name="plan" bind:selected>
   {#each values as value}
-    <RadioTile value="{value}">{value}</RadioTile>
+    <RadioTile {value}>{value}</RadioTile>
   {/each}
 </TileGroup>
 
@@ -18,8 +18,8 @@
 
 <Button
   size="small"
-  disabled="{selected === values[1]}"
-  on:click="{() => (selected = values[1])}"
+  disabled={selected === values[1]}
+  on:click={() => (selected = values[1])}
 >
   Set to "{values[1]}"
 </Button>

docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte

@@ -9,10 +9,10 @@
 <TileGroup
   legend="Service pricing tiers"
   name="plan"
-  on:select="{({ detail }) => (selected = detail)}"
+  on:select={({ detail }) => (selected = detail)}
 >
   {#each values as value}
-    <RadioTile value="{value}" checked="{selected === value}">
+    <RadioTile {value} checked={selected === value}>
       {value}
     </RadioTile>
   {/each}

docs/src/pages/framed/RecursiveList/RecursiveList.svelte

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

docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte

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

docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte

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

docs/src/pages/framed/Search/SearchReactive.svelte

@@ -10,16 +10,16 @@
   <ButtonSet>
     <Button
       size="small"
-      disabled="{value === 'Cloud functions'}"
-      on:click="{() => (value = 'Cloud functions')}"
+      disabled={value === "Cloud functions"}
+      on:click={() => (value = "Cloud functions")}
     >
       Set value
     </Button>
     <Button
       kind="ghost"
       size="small"
-      disabled="{value.length === 0}"
-      on:click="{() => (value = '')}"
+      disabled={value.length === 0}
+      on:click={() => (value = "")}
     >
       Clear value
     </Button>

docs/src/pages/framed/Select/SelectReactive.svelte

@@ -16,6 +16,6 @@
   Selected: <strong>{selected}</strong>
 </div>
 
-<Button disabled="{selected === 'g90'}" on:click="{() => (selected = 'g90')}">
+<Button disabled={selected === "g90"} on:click={() => (selected = "g90")}>
   Set to "g90"
 </Button>

docs/src/pages/framed/Tabs/TabsReactive.svelte

@@ -16,7 +16,7 @@
 </Tabs>
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (selected = 1)}">Set index to 1</Button>
+  <Button on:click={() => (selected = 1)}>Set index to 1</Button>
 </div>
 
 <strong>Selected index:</strong>

docs/src/pages/framed/Theme/Theme.svelte

@@ -10,8 +10,8 @@
 
 <Theme bind:theme />
 
-<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+<RadioButtonGroup legendText="Carbon theme" bind:selected={theme}>
   {#each ["white", "g10", "g80", "g90", "g100"] as value}
-    <RadioButton labelText="{value}" value="{value}" />
+    <RadioButton labelText={value} {value} />
   {/each}
 </RadioButtonGroup>

docs/src/pages/framed/Theme/ThemePersist.svelte

@@ -10,8 +10,8 @@
 
 <Theme bind:theme persist persistKey="__carbon-theme" />
 
-<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+<RadioButtonGroup legendText="Carbon theme" bind:selected={theme}>
   {#each ["white", "g10", "g80", "g90", "g100"] as value}
-    <RadioButton labelText="{value}" value="{value}" />
+    <RadioButton labelText={value} {value} />
   {/each}
 </RadioButtonGroup>

docs/src/pages/framed/Theme/ThemeSelectCustom.svelte

@@ -4,9 +4,9 @@
 
 <Theme
   render="select"
-  select="{{
-    themes: ['white', 'g90', 'g100'],
-    labelText: 'Select a theme',
+  select={{
+    themes: ["white", "g90", "g100"],
+    labelText: "Select a theme",
     inline: true,
-  }}"
+  }}
 />

docs/src/pages/framed/Theme/ThemeToggleCustom.svelte

@@ -4,11 +4,11 @@
 
 <Theme
   render="toggle"
-  toggle="{{
-    themes: ['g10', 'g80'],
-    labelA: 'Enable dark mode',
-    labelB: 'Enable dark mode',
+  toggle={{
+    themes: ["g10", "g80"],
+    labelA: "Enable dark mode",
+    labelB: "Enable dark mode",
     hideLabel: true,
-    size: 'sm',
-  }}"
+    size: "sm",
+  }}
 />

docs/src/pages/framed/Theme/ThemeTokens.svelte

@@ -4,11 +4,11 @@
 
 <Theme
   theme="g90"
-  tokens="{{
-    'interactive-01': '#d02670',
-    'hover-primary': '#ee5396',
-    'active-primary': '#9f1853',
-  }}"
+  tokens={{
+    "interactive-01": "#d02670",
+    "hover-primary": "#ee5396",
+    "active-primary": "#9f1853",
+  }}
 />
 
 <Button>Primary button</Button>

docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte

@@ -7,10 +7,10 @@
 </script>
 
 <Button
-  disabled="{showNotification}"
-  on:click="{() => {
+  disabled={showNotification}
+  on:click={() => {
     timeout = 3_000; // 3 seconds
-  }}"
+  }}
 >
   Show notification
 </Button>
@@ -18,15 +18,15 @@
 {#if showNotification}
   <div transition:fade>
     <ToastNotification
-      timeout="{timeout}"
+      {timeout}
       kind="success"
       title="Success"
       subtitle="This notification will autoclose in {timeout.toLocaleString()} ms."
-      caption="{new Date().toLocaleString()}"
-      on:close="{(e) => {
+      caption={new Date().toLocaleString()}
+      on:close={(e) => {
         timeout = undefined;
         console.log(e.detail.timeout); // true if closed via timeout
-      }}"
+      }}
     />
   </div>
 {/if}

docs/src/pages/framed/Toggle/ToggleReactive.svelte

@@ -7,7 +7,7 @@
 <Toggle labelText="Push notifications" bind:toggled />
 
 <div>
-  <Button size="small" on:click="{() => (toggled = !toggled)}">
+  <Button size="small" on:click={() => (toggled = !toggled)}>
     Toggle
     {toggled ? "off" : "on"}
   </Button>

docs/src/pages/framed/Tooltip/TooltipReactive.svelte

@@ -9,7 +9,7 @@
 </Tooltip>
 
 <div style="margin-top: var(--cds-spacing-12);">
-  <Button size="small" on:click="{() => (open = !open)}">
+  <Button size="small" on:click={() => (open = !open)}>
     {open ? "Close tooltip" : "Open tooltip"}
   </Button>
 </div>

docs/src/pages/framed/TreeView/TreeView.svelte

@@ -47,12 +47,12 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  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)}
 />
 
 <div>Active node id: {activeId}</div>

docs/src/pages/framed/TreeView/TreeViewActive.svelte

@@ -47,12 +47,12 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  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)}
 />
 
 <div>Active node id: {activeId}</div>

docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte

@@ -46,14 +46,14 @@
 </script>
 
 <div>
-  <Button on:click="{treeview?.collapseAll}">Collapse all</Button>
+  <Button on:click={treeview?.collapseAll}>Collapse all</Button>
 </div>
 
 <TreeView
-  bind:this="{treeview}"
+  bind:this={treeview}
   bind:expandedIds
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
 />
 
 <style>

docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte

@@ -49,19 +49,19 @@
 
 <div>
   <Button
-    on:click="{() => {
+    on:click={() => {
       treeview?.collapseNodes((node) => node.disabled);
-    }}"
+    }}
   >
     Collapse disabled nodes
   </Button>
 </div>
 
 <TreeView
-  bind:this="{treeview}"
+  bind:this={treeview}
   bind:expandedIds
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
 />
 
 <style>

docs/src/pages/framed/TreeView/TreeViewCompact.svelte

@@ -48,12 +48,12 @@
 <TreeView
   size="compact"
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  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)}
 />
 
 <div>Active node id: {activeId}</div>

docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte

@@ -45,14 +45,10 @@
 </script>
 
 <div>
-  <Button on:click="{treeview?.expandAll}">Expand all</Button>
+  <Button on:click={treeview?.expandAll}>Expand all</Button>
 </div>
 
-<TreeView
-  bind:this="{treeview}"
-  labelText="Cloud Products"
-  nodes="{nodes}"
-/>
+<TreeView bind:this={treeview} labelText="Cloud Products" {nodes} />
 
 <style>
   div {

docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte

@@ -46,19 +46,15 @@
 
 <div>
   <Button
-    on:click="{() => {
+    on:click={() => {
       treeview?.expandNodes((node) => /^IBM/.test(node.text));
-    }}"
+    }}
   >
     Expand nodes starting with "IBM"
   </Button>
 </div>
 
-<TreeView
-  bind:this="{treeview}"
-  labelText="Cloud Products"
-  nodes="{nodes}"
-/>
+<TreeView bind:this={treeview} labelText="Cloud Products" {nodes} />
 
 <style>
   div {

docs/src/pages/framed/TreeView/TreeViewExpanded.svelte

@@ -48,13 +48,13 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {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)}
 />
 
 <div>Active node id: {activeId}</div>

docs/src/pages/framed/TreeView/TreeViewIcons.svelte

@@ -76,12 +76,12 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  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)}
 />
 
 <div>Active node id: {activeId}</div>

docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte

@@ -47,12 +47,12 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  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)}
 />
 
 <div>Active node id: {activeId}</div>

docs/src/pages/framed/TreeView/TreeViewShowNode.svelte

@@ -31,19 +31,14 @@
 <ButtonSet style="margin-bottom: var(--cds-spacing-05)">
   {#each [nodeSpark, nodeBlockchain] as { id, text }}
     <Button
-      on:click="{() => {
+      on:click={() => {
         treeview?.showNode(id);
-      }}"
+      }}
     >
       Show "{text}"
     </Button>
   {/each}
-  <Button kind="tertiary" on:click="{treeview.collapseAll}">Collapse all</Button
-  >
+  <Button kind="tertiary" on:click={treeview.collapseAll}>Collapse all</Button>
 </ButtonSet>
 
-<TreeView
-  bind:this="{treeview}"
-  labelText="Cloud Products"
-  nodes="{nodes}"
-/>
+<TreeView bind:this={treeview} labelText="Cloud Products" {nodes} />

docs/src/pages/framed/TreeView/TreeViewSlot.svelte

@@ -45,16 +45,10 @@
   ];
 </script>
 
-<TreeView
-  labelText="Cloud Products"
-  activeId="{activeId}"
-  selectedIds="{selectedIds}"
-  nodes="{nodes}"
-  let:node
->
+<TreeView labelText="Cloud Products" {activeId} {selectedIds} {nodes} let:node>
   <span
-    style:color="{node.selected ? "var(--cds-interactive-04)" : "inherit"}"
-    style:text-decoration="{node.disabled ? "inherit" : "underline"}"
+    style:color={node.selected ? "var(--cds-interactive-04)" : "inherit"}
+    style:text-decoration={node.disabled ? "inherit" : "underline"}
   >
     {node.text} (id: {node.id})
   </span>