chore: format files with Prettier 3

src/Tile/ClickableTile.svelte

@@ -21,20 +21,20 @@
 
 <Link
   {...$$restProps}
-  disabled="{disabled}"
+  {disabled}
   class="bx--tile bx--tile--clickable {clicked &&
     'bx--tile--is-clicked'} {light && 'bx--tile--light'} {$$restProps.class}"
-  href="{href}"
+  {href}
   on:click
-  on:click="{() => {
+  on:click={() => {
     clicked = !clicked;
-  }}"
+  }}
   on:keydown
-  on:keydown="{({ key }) => {
-    if (key === ' ' || key === 'Enter') {
+  on:keydown={({ key }) => {
+    if (key === " " || key === "Enter") {
       clicked = !clicked;
     }
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave

src/Tile/ExpandableTile.svelte

@@ -64,39 +64,39 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
-  bind:this="{ref}"
+  bind:this={ref}
   type="button"
-  id="{id}"
-  aria-expanded="{expanded}"
-  tabindex="{tabindex}"
-  title="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
-  class:bx--tile="{true}"
-  class:bx--tile--expandable="{true}"
-  class:bx--tile--is-expanded="{expanded}"
-  class:bx--tile--light="{light}"
-  style:max-height="{expanded ? "none" : `${tileMaxHeight + tilePadding}px`}"
+  {id}
+  aria-expanded={expanded}
+  {tabindex}
+  title={expanded ? tileExpandedIconText : tileCollapsedIconText}
+  class:bx--tile={true}
+  class:bx--tile--expandable={true}
+  class:bx--tile--is-expanded={expanded}
+  class:bx--tile--light={light}
+  style:max-height={expanded ? "none" : `${tileMaxHeight + tilePadding}px`}
   {...$$restProps}
   on:click
-  on:click="{() => {
+  on:click={() => {
     expanded = !expanded;
-  }}"
+  }}
   on:keypress
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
   <div>
-    <div bind:this="{refAbove}" class:bx--tile-content="{true}">
-      <span class:bx--tile-content__above-the-fold="{true}">
+    <div bind:this={refAbove} class:bx--tile-content={true}>
+      <span class:bx--tile-content__above-the-fold={true}>
         <slot name="above" />
       </span>
     </div>
-    <div class:bx--tile__chevron="{true}">
+    <div class:bx--tile__chevron={true}>
       <span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
       <ChevronDown />
     </div>
-    <div class:bx--tile-content="{true}">
-      <span class:bx--tile-content__below-the-fold="{true}">
+    <div class:bx--tile-content={true}>
+      <span class:bx--tile-content__below-the-fold={true}>
         <slot name="below" />
       </span>
     </div>

src/Tile/RadioTile.svelte

@@ -34,7 +34,7 @@
   import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
 
   const { add, update, selectedValue, groupName, groupRequired } = getContext(
-    "TileGroup"
+    "TileGroup",
   ) ?? {
     groupName: readable(undefined),
     groupRequired: readable(undefined),
@@ -48,47 +48,47 @@
 
 <input
   type="radio"
-  id="{id}"
-  name="{$groupName ?? name}"
-  value="{value}"
-  checked="{checked}"
-  tabindex="{disabled ? undefined : tabindex}"
-  disabled="{disabled}"
-  required="{$groupRequired ?? required}"
-  class:bx--tile-input="{true}"
+  {id}
+  name={$groupName ?? name}
+  {value}
+  {checked}
+  tabindex={disabled ? undefined : tabindex}
+  {disabled}
+  required={$groupRequired ?? required}
+  class:bx--tile-input={true}
   on:change
-  on:change="{() => {
+  on:change={() => {
     if (disabled) return;
     update(value);
-  }}"
+  }}
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (disabled) return;
-    if (e.key === ' ' || e.key === 'Enter') {
+    if (e.key === " " || e.key === "Enter") {
       e.preventDefault();
       update(value);
     }
-  }}"
+  }}
 />
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
-  for="{id}"
-  class:bx--tile="{true}"
-  class:bx--tile--selectable="{true}"
-  class:bx--tile--is-selected="{checked}"
-  class:bx--tile--light="{light}"
-  class:bx--tile--disabled="{disabled}"
+  for={id}
+  class:bx--tile={true}
+  class:bx--tile--selectable={true}
+  class:bx--tile--is-selected={checked}
+  class:bx--tile--light={light}
+  class:bx--tile--disabled={disabled}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <span class:bx--tile__checkmark="{true}">
-    <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
+  <span class:bx--tile__checkmark={true}>
+    <CheckmarkFilled aria-label={iconDescription} title={iconDescription} />
   </span>
-  <span class:bx--tile-content="{true}">
+  <span class:bx--tile-content={true}>
     <slot />
   </span>
 </label>

src/Tile/SelectableTile.svelte

@@ -46,50 +46,50 @@
 </script>
 
 <input
-  bind:this="{ref}"
+  bind:this={ref}
   type="checkbox"
   tabindex="-1"
-  class:bx--tile-input="{true}"
-  checked="{selected}"
-  id="{id}"
-  value="{value}"
-  name="{name}"
-  title="{title}"
-  disabled="{disabled}"
+  class:bx--tile-input={true}
+  checked={selected}
+  {id}
+  {value}
+  {name}
+  {title}
+  {disabled}
 />
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
-  for="{id}"
-  tabindex="{disabled ? undefined : tabindex}"
-  class:bx--tile="{true}"
-  class:bx--tile--selectable="{true}"
-  class:bx--tile--is-selected="{selected}"
-  class:bx--tile--light="{light}"
-  class:bx--tile--disabled="{disabled}"
+  for={id}
+  tabindex={disabled ? undefined : tabindex}
+  class:bx--tile={true}
+  class:bx--tile--selectable={true}
+  class:bx--tile--is-selected={selected}
+  class:bx--tile--light={light}
+  class:bx--tile--disabled={disabled}
   {...$$restProps}
   on:click
-  on:click|preventDefault="{() => {
+  on:click|preventDefault={() => {
     if (disabled) return;
     selected = !selected;
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (disabled) return;
-    if (e.key === ' ' || e.key === 'Enter') {
+    if (e.key === " " || e.key === "Enter") {
       e.preventDefault();
       selected = !selected;
     }
-  }}"
+  }}
 >
-  <span class:bx--tile__checkmark="{true}">
-    <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
+  <span class:bx--tile__checkmark={true}>
+    <CheckmarkFilled aria-label={iconDescription} title={iconDescription} />
   </span>
-  <span class:bx--tile-content="{true}">
+  <span class:bx--tile-content={true}>
     <slot />
   </span>
 </label>

src/Tile/Tile.svelte

@@ -6,8 +6,8 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--tile="{true}"
-  class:bx--tile--light="{light}"
+  class:bx--tile={true}
+  class:bx--tile--light={light}
   {...$$restProps}
   on:click
   on:mouseover

src/Tile/TileGroup.svelte

@@ -56,9 +56,9 @@
   $: $groupRequired = required;
 </script>
 
-<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
+<fieldset {disabled} class:bx--tile-group={true} {...$$restProps}>
   {#if legend}
-    <legend class:bx--label="{true}">{legend}</legend>
+    <legend class:bx--label={true}>{legend}</legend>
   {/if}
   <div>
     <slot />