chore: format files with Prettier 3

src/Accordion/Accordion.svelte

@@ -34,8 +34,8 @@
 {#if skeleton}
   <AccordionSkeleton
     {...$$restProps}
-    align="{align}"
-    size="{size}"
+    {align}
+    {size}
     on:click
     on:mouseover
     on:mouseenter
@@ -44,11 +44,11 @@
 {:else}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <ul
-    class:bx--accordion="{true}"
-    class:bx--accordion--start="{align === 'start'}"
-    class:bx--accordion--end="{align === 'end'}"
-    class:bx--accordion--sm="{size === 'sm'}"
-    class:bx--accordion--xl="{size === 'xl'}"
+    class:bx--accordion={true}
+    class:bx--accordion--start={align === "start"}
+    class:bx--accordion--end={align === "end"}
+    class:bx--accordion--sm={size === "sm"}
+    class:bx--accordion--xl={size === "xl"}
     {...$$restProps}
     on:click
     on:mouseover

src/Accordion/AccordionItem.svelte

@@ -36,44 +36,44 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
-  class:bx--accordion__item="{true}"
-  class:bx--accordion__item--active="{open}"
-  class:bx--accordion__item--disabled="{disabled}"
-  class:bx--accordion__item--expanding="{animation === 'expanding'}"
-  class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
+  class:bx--accordion__item={true}
+  class:bx--accordion__item--active={open}
+  class:bx--accordion__item--disabled={disabled}
+  class:bx--accordion__item--expanding={animation === "expanding"}
+  class:bx--accordion__item--collapsing={animation === "collapsing"}
   {...$$restProps}
   on:animationend
-  on:animationend="{() => {
+  on:animationend={() => {
     animation = undefined;
-  }}"
+  }}
 >
   <button
     type="button"
-    class:bx--accordion__heading="{true}"
-    title="{iconDescription}"
-    aria-expanded="{open}"
-    disabled="{disabled}"
+    class:bx--accordion__heading={true}
+    title={iconDescription}
+    aria-expanded={open}
+    {disabled}
     on:click
-    on:click="{() => {
+    on:click={() => {
       open = !open;
-      animation = open ? 'expanding' : 'collapsing';
-    }}"
+      animation = open ? "expanding" : "collapsing";
+    }}
     on:mouseover
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown="{({ key }) => {
-      if (open && key === 'Escape') {
+    on:keydown={({ key }) => {
+      if (open && key === "Escape") {
         open = false;
       }
-    }}"
+    }}
   >
-    <ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
-    <div class:bx--accordion__title="{true}">
+    <ChevronRight class="bx--accordion__arrow" aria-label={iconDescription} />
+    <div class:bx--accordion__title={true}>
       <slot name="title">{title}</slot>
     </div>
   </button>
-  <div class:bx--accordion__content="{true}">
+  <div class:bx--accordion__content={true}>
     <slot />
   </div>
 </li>

src/Accordion/AccordionSkeleton.svelte

@@ -24,12 +24,12 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ul
-  class:bx--skeleton="{true}"
-  class:bx--accordion="{true}"
-  class:bx--accordion--start="{align === 'start'}"
-  class:bx--accordion--end="{align === 'end'}"
-  class:bx--accordion--sm="{size === 'sm'}"
-  class:bx--accordion--xl="{size === 'xl'}"
+  class:bx--skeleton={true}
+  class:bx--accordion={true}
+  class:bx--accordion--start={align === "start"}
+  class:bx--accordion--end={align === "end"}
+  class:bx--accordion--sm={size === "sm"}
+  class:bx--accordion--xl={size === "xl"}
   {...$$restProps}
   on:click
   on:mouseover
@@ -38,14 +38,14 @@
 >
   {#if open}
     <li
-      class:bx--accordion__item="{true}"
-      class:bx--accordion__item--active="{true}"
+      class:bx--accordion__item={true}
+      class:bx--accordion__item--active={true}
     >
-      <span class:bx--accordion__heading="{true}">
+      <span class:bx--accordion__heading={true}>
         <ChevronRight class="bx--accordion__arrow" />
         <SkeletonText class="bx--accordion__title" />
       </span>
-      <div class:bx--accordion__content="{true}">
+      <div class:bx--accordion__content={true}>
         <SkeletonText width="90%" />
         <SkeletonText width="80%" />
         <SkeletonText width="95%" />
@@ -53,8 +53,8 @@
     </li>
   {/if}
   {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
-    <li class:bx--accordion__item="{true}">
-      <span class:bx--accordion__heading="{true}">
+    <li class:bx--accordion__item={true}>
+      <span class:bx--accordion__heading={true}>
         <ChevronRight class="bx--accordion__arrow" />
         <SkeletonText class="bx--accordion__title" />
       </span>

src/AspectRatio/AspectRatio.svelte

@@ -7,19 +7,19 @@
 </script>
 
 <div
-  class:bx--aspect-ratio="{true}"
-  class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
-  class:bx--aspect-ratio--2x3="{ratio === '2x3'}"
-  class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
-  class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
-  class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
-  class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
-  class:bx--aspect-ratio--3x2="{ratio === '3x2'}"
-  class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
-  class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
+  class:bx--aspect-ratio={true}
+  class:bx--aspect-ratio--2x1={ratio === "2x1"}
+  class:bx--aspect-ratio--2x3={ratio === "2x3"}
+  class:bx--aspect-ratio--16x9={ratio === "16x9"}
+  class:bx--aspect-ratio--4x3={ratio === "4x3"}
+  class:bx--aspect-ratio--1x1={ratio === "1x1"}
+  class:bx--aspect-ratio--3x4={ratio === "3x4"}
+  class:bx--aspect-ratio--3x2={ratio === "3x2"}
+  class:bx--aspect-ratio--9x16={ratio === "9x16"}
+  class:bx--aspect-ratio--1x2={ratio === "1x2"}
   {...$$restProps}
 >
-  <div class:bx--aspect-ratio--object="{true}">
+  <div class:bx--aspect-ratio--object={true}>
     <slot />
   </div>
 </div>

src/Breadcrumb/Breadcrumb.svelte

@@ -13,7 +13,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <BreadcrumbSkeleton
-    noTrailingSlash="{noTrailingSlash}"
+    {noTrailingSlash}
     {...$$restProps}
     on:click
     on:mouseover
@@ -31,8 +31,8 @@
     on:mouseleave
   >
     <ol
-      class:bx--breadcrumb="{true}"
-      class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
+      class:bx--breadcrumb={true}
+      class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
     >
       <slot />
     </ol>

src/Breadcrumb/BreadcrumbItem.svelte

@@ -22,9 +22,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
-  class:bx--breadcrumb-item="{true}"
-  class:bx--breadcrumb-item--current="{isCurrentPage &&
-    $$restProps['aria-current'] !== 'page'}"
+  class:bx--breadcrumb-item={true}
+  class:bx--breadcrumb-item--current={isCurrentPage &&
+    $$restProps["aria-current"] !== "page"}
   {...$$restProps}
   on:click
   on:mouseover
@@ -32,15 +32,15 @@
   on:mouseleave
 >
   {#if href}
-    <Link href="{href}" aria-current="{$$restProps['aria-current']}">
+    <Link {href} aria-current={$$restProps["aria-current"]}>
       <slot />
     </Link>
   {:else}
     <slot
-      props="{{
-        'aria-current': $$restProps['aria-current'],
-        class: 'bx--link',
-      }}"
+      props={{
+        "aria-current": $$restProps["aria-current"],
+        class: "bx--link",
+      }}
     />
   {/if}
 </li>

src/Breadcrumb/BreadcrumbSkeleton.svelte

@@ -9,9 +9,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--breadcrumb="{true}"
-  class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
+  class:bx--skeleton={true}
+  class:bx--breadcrumb={true}
+  class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
   {...$$restProps}
   on:click
   on:mouseover
@@ -19,8 +19,8 @@
   on:mouseleave
 >
   {#each Array.from({ length: count }, (_, i) => i) as item (item)}
-    <div class:bx--breadcrumb-item="{true}">
-      <span class:bx--link="{true}">&nbsp;</span>
+    <div class:bx--breadcrumb-item={true}>
+      <span class:bx--link={true}>&nbsp;</span>
     </div>
   {/each}
 </div>

src/Breakpoint/Breakpoint.svelte

@@ -44,4 +44,4 @@
     dispatch("change", { size, breakpointValue: breakpoints[size] });
 </script>
 
-<slot size="{size}" sizes="{sizes}" />
+<slot {size} {sizes} />

src/Breakpoint/breakpointObserver.d.ts

@@ -9,7 +9,7 @@ export function breakpointObserver(): {
   subscribe: (
     this: void,
     run: Subscriber<any>,
-    invalidate?: (value?: any) => void
+    invalidate?: (value?: any) => void,
   ) => Unsubscriber;
   /**
    * Returns a store readable store that returns whether the current

src/Breakpoint/breakpointObserver.js

@@ -14,19 +14,19 @@ export function breakpointObserver() {
     const match = {
       sm: window.matchMedia(`(max-width: ${breakpoints.md}px)`),
       md: window.matchMedia(
-        `(min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px)`
+        `(min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px)`,
       ),
       lg: window.matchMedia(
-        `(min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xlg}px)`
+        `(min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xlg}px)`,
       ),
       xlg: window.matchMedia(
-        `(min-width: ${breakpoints.xlg}px) and (max-width: ${breakpoints.max}px)`
+        `(min-width: ${breakpoints.xlg}px) and (max-width: ${breakpoints.max}px)`,
       ),
       max: window.matchMedia(`(min-width: ${breakpoints.max}px)`),
     };
     const matchers = Object.entries(match);
     const sizeByMedia = Object.fromEntries(
-      matchers.map(([size, queryList]) => [queryList.media, size])
+      matchers.map(([size, queryList]) => [queryList.media, size]),
     );
 
     const size = matchers.find(([size, queryList]) => queryList.matches)[0];
@@ -39,12 +39,12 @@ export function breakpointObserver() {
     }
 
     matchers.forEach(([size, queryList]) =>
-      queryList.addEventListener("change", handleChange)
+      queryList.addEventListener("change", handleChange),
     );
 
     return () => {
       matchers.forEach(([size, queryList]) =>
-        queryList.removeEventListener("change", handleChange)
+        queryList.removeEventListener("change", handleChange),
       );
     };
   });

src/Breakpoint/index.d.ts

@@ -2,4 +2,3 @@
 export { default as Breakpoint } from "./Breakpoint.svelte";
 export { breakpointObserver } from "./breakpointObserver";
 export { breakpoints } from "./breakpoints";
-

src/Button/Button.svelte

@@ -136,10 +136,10 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <ButtonSkeleton
-    href="{href}"
-    size="{size}"
+    {href}
+    {size}
     {...$$restProps}
-    style="{hasIconOnly && 'width: 3rem;'}"
+    style={hasIconOnly && "width: 3rem;"}
     on:click
     on:focus
     on:blur
@@ -148,12 +148,12 @@
     on:mouseleave
   />
 {:else if as}
-  <slot props="{buttonProps}" />
+  <slot props={buttonProps} />
 {:else if href && !disabled}
   <!-- svelte-ignore a11y-missing-attribute -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <a
-    bind:this="{ref}"
+    bind:this={ref}
     {...buttonProps}
     on:click
     on:focus
@@ -163,26 +163,26 @@
     on:mouseleave
   >
     {#if hasIconOnly}
-      <span class:bx--assistive-text="{true}">{iconDescription}</span>
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
     {/if}
     <slot />
     {#if $$slots.icon}
       <slot
         name="icon"
-        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        style={hasIconOnly ? "margin-left: 0" : undefined}
         {...iconProps}
       />
     {:else if icon}
       <svelte:component
-        this="{icon}"
-        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        this={icon}
+        style={hasIconOnly ? "margin-left: 0" : undefined}
         {...iconProps}
       />
     {/if}
   </a>
 {:else}
   <button
-    bind:this="{ref}"
+    bind:this={ref}
     {...buttonProps}
     on:click
     on:focus
@@ -192,19 +192,19 @@
     on:mouseleave
   >
     {#if hasIconOnly}
-      <span class:bx--assistive-text="{true}">{iconDescription}</span>
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
     {/if}
     <slot />
     {#if $$slots.icon}
       <slot
         name="icon"
-        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        style={hasIconOnly ? "margin-left: 0" : undefined}
         {...iconProps}
       />
     {:else if icon}
       <svelte:component
-        this="{icon}"
-        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        this={icon}
+        style={hasIconOnly ? "margin-left: 0" : undefined}
         {...iconProps}
       />
     {/if}

src/Button/ButtonSet.svelte

@@ -4,8 +4,8 @@
 </script>
 
 <div
-  class:bx--btn-set="{true}"
-  class:bx--btn-set--stacked="{stacked}"
+  class:bx--btn-set={true}
+  class:bx--btn-set--stacked={stacked}
   {...$$restProps}
 >
   <slot />

src/Button/ButtonSkeleton.svelte

@@ -15,15 +15,15 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if href}
   <a
-    href="{href}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
     role="button"
-    class:bx--skeleton="{true}"
-    class:bx--btn="{true}"
-    class:bx--btn--field="{size === 'field'}"
-    class:bx--btn--sm="{size === 'small'}"
-    class:bx--btn--lg="{size === 'lg'}"
-    class:bx--btn--xl="{size === 'xl'}"
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--field={size === "field"}
+    class:bx--btn--sm={size === "small"}
+    class:bx--btn--lg={size === "lg"}
+    class:bx--btn--xl={size === "xl"}
     {...$$restProps}
     on:click
     on:focus
@@ -37,12 +37,12 @@
 {:else}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class:bx--skeleton="{true}"
-    class:bx--btn="{true}"
-    class:bx--btn--field="{size === 'field'}"
-    class:bx--btn--sm="{size === 'small'}"
-    class:bx--btn--lg="{size === 'lg'}"
-    class:bx--btn--xl="{size === 'xl'}"
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--field={size === "field"}
+    class:bx--btn--sm={size === "small"}
+    class:bx--btn--lg={size === "lg"}
+    class:bx--btn--xl={size === "xl"}
     {...$$restProps}
     on:click
     on:focus

src/Checkbox/Checkbox.svelte

@@ -82,8 +82,8 @@
 {:else}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class:bx--form-item="{true}"
-    class:bx--checkbox-wrapper="{true}"
+    class:bx--form-item={true}
+    class:bx--checkbox-wrapper={true}
     {...$$restProps}
     on:click
     on:mouseover
@@ -91,18 +91,18 @@
     on:mouseleave
   >
     <input
-      bind:this="{ref}"
+      bind:this={ref}
       type="checkbox"
-      value="{value}"
-      checked="{checked}"
-      disabled="{disabled}"
-      id="{id}"
+      {value}
+      {checked}
+      {disabled}
+      {id}
       bind:indeterminate
-      name="{name}"
-      required="{required}"
-      readonly="{readonly}"
-      class:bx--checkbox="{true}"
-      on:change="{() => {
+      {name}
+      {required}
+      {readonly}
+      class:bx--checkbox={true}
+      on:change={() => {
         if (useGroup) {
           group = group.includes(value)
             ? group.filter((_value) => _value !== value)
@@ -110,16 +110,16 @@
         } else {
           checked = !checked;
         }
-      }}"
+      }}
       on:change
       on:focus
       on:blur
     />
-    <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
+    <label for={id} {title} class:bx--checkbox-label={true}>
       <span
-        bind:this="{refLabel}"
-        class:bx--checkbox-label-text="{true}"
-        class:bx--visually-hidden="{hideLabel}"
+        bind:this={refLabel}
+        class:bx--checkbox-label-text={true}
+        class:bx--visually-hidden={hideLabel}
       >
         <slot name="labelText">
           {labelText}

src/Checkbox/CheckboxSkeleton.svelte

@@ -1,15 +1,14 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
-  class:bx--checkbox-wrapper="{true}"
-  class:bx--checkbox-label="{true}"
+  class:bx--form-item={true}
+  class:bx--checkbox-wrapper={true}
+  class:bx--checkbox-label={true}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
-  ></span>
+  <span class:bx--checkbox-label-text={true} class:bx--skeleton={true}></span>
 </div>

src/Checkbox/InlineCheckbox.svelte

@@ -18,23 +18,24 @@
   export let ref = null;
 </script>
 
-<div class:bx--checkbox--inline="{true}">
+<div class:bx--checkbox--inline={true}>
   <input
-    bind:this="{ref}"
+    bind:this={ref}
     type="checkbox"
-    class:bx--checkbox="{true}"
-    checked="{indeterminate ? false : checked}"
+    class:bx--checkbox={true}
+    checked={indeterminate ? false : checked}
     bind:indeterminate
-    id="{id}"
+    {id}
     {...$$restProps}
-    aria-checked="{indeterminate ? undefined : checked}"
+    aria-checked={indeterminate ? undefined : checked}
     on:change
     on:focus
     on:blur
   />
   <label
-    for="{id}"
-    title="{title}"
-    aria-label="{$$props['aria-label']}"
-    class:bx--checkbox-label="{true}"></label>
+    for={id}
+    {title}
+    aria-label={$$props["aria-label"]}
+    class:bx--checkbox-label={true}
+  ></label>
 </div>

src/CodeSnippet/CodeSnippet.svelte

@@ -146,7 +146,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <CodeSnippetSkeleton
-    type="{type}"
+    {type}
     {...$$restProps}
     on:click
     on:mouseover
@@ -156,17 +156,17 @@
 {:else if type === "inline"}
   {#if hideCopyButton}
     <span
-      class:bx--snippet="{true}"
-      class:bx--snippet--expand="{expanded}"
-      class:bx--snippet--light="{light}"
-      class:bx--snippet--no-copy="{hideCopyButton}"
-      class:bx--snippet--wraptext="{wrapText}"
-      class:bx--snippet--single="{type === 'single'}"
-      class:bx--snippet--inline="{type === 'inline'}"
-      class:bx--snippet--multi="{type === 'multi'}"
+      class:bx--snippet={true}
+      class:bx--snippet--expand={expanded}
+      class:bx--snippet--light={light}
+      class:bx--snippet--no-copy={hideCopyButton}
+      class:bx--snippet--wraptext={wrapText}
+      class:bx--snippet--single={type === "single"}
+      class:bx--snippet--inline={type === "inline"}
+      class:bx--snippet--multi={type === "multi"}
       {...$$restProps}
     >
-      <code id="{id}">
+      <code {id}>
         <slot>{code}</slot>
       </code>
     </span>
@@ -174,44 +174,44 @@
     <button
       type="button"
       aria-live="polite"
-      class:bx--copy="{true}"
-      class:bx--btn--copy="{true}"
-      class:bx--copy-btn--animating="{animation}"
-      class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
-      class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
-      class:bx--snippet="{true}"
-      class:bx--snippet--inline="{type === 'inline'}"
-      class:bx--snippet--expand="{expanded}"
-      class:bx--snippet--light="{light}"
-      class:bx--snippet--wraptext="{wrapText}"
-      aria-label="{copyLabel}"
+      class:bx--copy={true}
+      class:bx--btn--copy={true}
+      class:bx--copy-btn--animating={animation}
+      class:bx--copy-btn--fade-in={animation === "fade-in"}
+      class:bx--copy-btn--fade-out={animation === "fade-out"}
+      class:bx--snippet={true}
+      class:bx--snippet--inline={type === "inline"}
+      class:bx--snippet--expand={expanded}
+      class:bx--snippet--light={light}
+      class:bx--snippet--wraptext={wrapText}
+      aria-label={copyLabel}
       {...$$restProps}
       on:click
-      on:click="{() => {
+      on:click={() => {
         copy(code);
-        dispatch('copy');
-        if (animation === 'fade-in') return;
-        animation = 'fade-in';
+        dispatch("copy");
+        if (animation === "fade-in") return;
+        animation = "fade-in";
         timeout = setTimeout(() => {
-          animation = 'fade-out';
+          animation = "fade-out";
         }, feedbackTimeout);
-      }}"
-      on:animationend="{({ animationName }) => {
-        if (animationName === 'hide-feedback') {
+      }}
+      on:animationend={({ animationName }) => {
+        if (animationName === "hide-feedback") {
           animation = undefined;
         }
-      }}"
+      }}
       on:mouseover
       on:mouseenter
       on:mouseleave
     >
-      <code id="{id}">
+      <code {id}>
         <slot>{code}</slot>
       </code>
       <span
         aria-hidden="true"
-        class:bx--assistive-text="{true}"
-        class:bx--copy-btn__feedback="{true}"
+        class:bx--assistive-text={true}
+        class:bx--copy-btn__feedback={true}
       >
         {feedback}
       </span>
@@ -220,15 +220,15 @@
 {:else}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class:bx--snippet="{true}"
-    class:bx--snippet--expand="{expanded}"
-    class:bx--snippet--light="{light}"
-    class:bx--snippet--no-copy="{hideCopyButton}"
-    class:bx--snippet--wraptext="{wrapText}"
-    class:bx--snippet--single="{type === 'single'}"
-    class:bx--snippet--inline="{type === 'inline'}"
-    class:bx--snippet--multi="{type === 'multi'}"
-    class:bx--snippet--disabled="{type !== 'inline' && disabled}"
+    class:bx--snippet={true}
+    class:bx--snippet--expand={expanded}
+    class:bx--snippet--light={light}
+    class:bx--snippet--no-copy={hideCopyButton}
+    class:bx--snippet--wraptext={wrapText}
+    class:bx--snippet--single={type === "single"}
+    class:bx--snippet--inline={type === "inline"}
+    class:bx--snippet--multi={type === "multi"}
+    class:bx--snippet--disabled={type !== "inline" && disabled}
     {...$$restProps}
     on:mouseover
     on:mouseenter
@@ -236,24 +236,24 @@
   >
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <div
-      role="{type === 'single' ? 'textbox' : undefined}"
-      tabindex="{type === 'single' && !disabled ? '0' : undefined}"
-      aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
-      class:bx--snippet-container="{true}"
+      role={type === "single" ? "textbox" : undefined}
+      tabindex={type === "single" && !disabled ? "0" : undefined}
+      aria-label={$$restProps["aria-label"] || copyLabel || "code-snippet"}
+      class:bx--snippet-container={true}
       style:width="100%"
       style:min-height="{minHeight}px"
-      style:max-height="{maxHeight}"
+      style:max-height={maxHeight}
     >
-      <pre bind:this="{ref}"><code><slot>{code}</slot></code></pre>
+      <pre bind:this={ref}><code><slot>{code}</slot></code></pre>
     </div>
     {#if !hideCopyButton}
       <CopyButton
-        text="{code}"
-        copy="{copy}"
-        disabled="{disabled}"
-        feedback="{feedback}"
-        feedbackTimeout="{feedbackTimeout}"
-        iconDescription="{copyButtonDescription}"
+        text={code}
+        {copy}
+        {disabled}
+        {feedback}
+        {feedbackTimeout}
+        iconDescription={copyButtonDescription}
         on:click
         on:copy
         on:animationend
@@ -264,15 +264,15 @@
         kind="ghost"
         size="small"
         class="bx--snippet-btn--expand"
-        disabled="{disabled}"
-        on:click="{() => {
+        {disabled}
+        on:click={() => {
           expanded = !expanded;
-        }}"
+        }}
       >
-        <span class:bx--snippet-btn--text="{true}">{expandText}</span>
+        <span class:bx--snippet-btn--text={true}>{expandText}</span>
         <ChevronDown
           class="bx--icon-chevron--down bx--snippet__icon"
-          aria-label="{expandText}"
+          aria-label={expandText}
         />
       </Button>
     {/if}

src/CodeSnippet/CodeSnippetSkeleton.svelte

@@ -9,17 +9,17 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--snippet="{true}"
-  class:bx--snippet--single="{type === 'single'}"
-  class:bx--snippet--multi="{type === 'multi'}"
+  class:bx--skeleton={true}
+  class:bx--snippet={true}
+  class:bx--snippet--single={type === "single"}
+  class:bx--snippet--multi={type === "multi"}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--snippet-container="{true}">
+  <div class:bx--snippet-container={true}>
     {#if type === "single"}
       <span></span>
     {:else if type === "multi"}<span></span> <span></span> <span></span>{/if}

src/ComboBox/ComboBox.svelte

@@ -211,20 +211,16 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (open && ref && !ref.contains(target)) {
       open = false;
     }
-  }}"
+  }}
 />
 
-<div class:bx--list-box__wrapper="{true}">
+<div class:bx--list-box__wrapper={true}>
   {#if titleText || $$slots.titleText}
-    <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}"
-    >
+    <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
       <slot name="titleText">
         {titleText}
       </slot>
@@ -233,51 +229,51 @@
   <ListBox
     class="bx--combo-box {direction === 'top' &&
       'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
-    id="{comboId}"
-    aria-label="{ariaLabel}"
-    disabled="{disabled}"
-    invalid="{invalid}"
-    invalidText="{invalidText}"
-    open="{open}"
-    light="{light}"
-    size="{size}"
-    warn="{warn}"
-    warnText="{warnText}"
+    id={comboId}
+    aria-label={ariaLabel}
+    {disabled}
+    {invalid}
+    {invalidText}
+    {open}
+    {light}
+    {size}
+    {warn}
+    {warnText}
   >
     <ListBoxField
       role="button"
-      aria-expanded="{open}"
-      on:click="{async () => {
+      aria-expanded={open}
+      on:click={async () => {
         if (disabled) return;
         open = true;
         await tick();
         ref.focus();
-      }}"
-      id="{id}"
-      disabled="{disabled}"
-      translateWithId="{translateWithId}"
+      }}
+      {id}
+      {disabled}
+      {translateWithId}
     >
       <input
-        bind:this="{ref}"
+        bind:this={ref}
         bind:value
         tabindex="0"
         autocomplete="off"
         aria-autocomplete="list"
-        aria-expanded="{open}"
-        aria-activedescendant="{highlightedId}"
-        aria-labelledby="{comboId}"
-        aria-disabled="{disabled}"
-        aria-controls="{open ? menuId : undefined}"
-        aria-owns="{open ? menuId : undefined}"
-        disabled="{disabled}"
-        placeholder="{placeholder}"
-        id="{id}"
-        name="{name}"
+        aria-expanded={open}
+        aria-activedescendant={highlightedId}
+        aria-labelledby={comboId}
+        aria-disabled={disabled}
+        aria-controls={open ? menuId : undefined}
+        aria-owns={open ? menuId : undefined}
+        {disabled}
+        {placeholder}
+        {id}
+        {name}
         {...$$restProps}
-        class:bx--text-input="{true}"
-        class:bx--text-input--light="{light}"
-        class:bx--text-input--empty="{value === ''}"
-        on:input="{({ target }) => {
+        class:bx--text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--empty={value === ""}
+        on:input={({ target }) => {
           if (!open && target.value.length > 0) {
             open = true;
           }
@@ -286,14 +282,14 @@
             clear();
             open = true;
           }
-        }}"
+        }}
         on:keydown
-        on:keydown|stopPropagation="{(e) => {
+        on:keydown|stopPropagation={(e) => {
           const { key } = e;
-          if (['Enter', 'ArrowDown', 'ArrowUp'].includes(key)) {
+          if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {
             e.preventDefault();
           }
-          if (key === 'Enter') {
+          if (key === "Enter") {
             open = !open;
             if (
               highlightedIndex > -1 &&
@@ -310,7 +306,8 @@
               const matchedItem =
                 filteredItems.find(
                   (e) =>
-                    e.text.toLowerCase() === value?.toLowerCase() && !e.disabled
+                    e.text.toLowerCase() === value?.toLowerCase() &&
+                    !e.disabled,
                 ) ?? filteredItems.find((e) => !e.disabled);
               if (matchedItem) {
                 // typed value has matched or fallback to first enabled item
@@ -321,30 +318,30 @@
               }
             }
             highlightedIndex = -1;
-          } else if (key === 'Tab') {
+          } else if (key === "Tab") {
             open = false;
-          } else if (key === 'ArrowDown') {
+          } else if (key === "ArrowDown") {
             change(1);
-          } else if (key === 'ArrowUp') {
+          } else if (key === "ArrowUp") {
             change(-1);
-          } else if (key === 'Escape') {
+          } else if (key === "Escape") {
             open = false;
           }
-        }}"
+        }}
         on:keyup
         on:focus
         on:blur
-        on:blur="{({ relatedTarget }) => {
+        on:blur={({ relatedTarget }) => {
           if (!open || !relatedTarget) return;
           if (
             relatedTarget &&
-            !['INPUT', 'SELECT', 'TEXTAREA'].includes(relatedTarget.tagName) &&
-            relatedTarget.getAttribute('role') !== 'button' &&
-            relatedTarget.getAttribute('role') !== 'searchbox'
+            !["INPUT", "SELECT", "TEXTAREA"].includes(relatedTarget.tagName) &&
+            relatedTarget.getAttribute("role") !== "button" &&
+            relatedTarget.getAttribute("role") !== "searchbox"
           ) {
             ref.focus();
           }
-        }}"
+        }}
         on:paste
       />
       {#if invalid}
@@ -358,36 +355,31 @@
       {#if value}
         <ListBoxSelection
           on:clear
-          on:clear="{clear}"
-          translateWithId="{translateWithIdSelection}"
-          disabled="{disabled}"
-          open="{open}"
+          on:clear={clear}
+          translateWithId={translateWithIdSelection}
+          {disabled}
+          {open}
         />
       {/if}
       <ListBoxMenuIcon
-        on:click="{(e) => {
+        on:click={(e) => {
           if (disabled) return;
           e.stopPropagation();
           open = !open;
-        }}"
-        translateWithId="{translateWithId}"
-        open="{open}"
+        }}
+        {translateWithId}
+        {open}
       />
     </ListBoxField>
     {#if open}
-      <ListBoxMenu
-        aria-label="{ariaLabel}"
-        id="{id}"
-        on:scroll
-        bind:ref="{listRef}"
-      >
+      <ListBoxMenu aria-label={ariaLabel} {id} on:scroll bind:ref={listRef}>
         {#each filteredItems as item, i (item.id)}
           <ListBoxMenuItem
-            id="{item.id}"
-            active="{selectedId === item.id}"
-            highlighted="{highlightedIndex === i}"
-            disabled="{item.disabled}"
-            on:click="{(e) => {
+            id={item.id}
+            active={selectedId === item.id}
+            highlighted={highlightedIndex === i}
+            disabled={item.disabled}
+            on:click={(e) => {
               if (item.disabled) {
                 e.stopPropagation();
                 return;
@@ -398,13 +390,13 @@
               if (filteredItems[i]) {
                 value = itemToString(filteredItems[i]);
               }
-            }}"
-            on:mouseenter="{() => {
+            }}
+            on:mouseenter={() => {
               if (item.disabled) return;
               highlightedIndex = i;
-            }}"
+            }}
           >
-            <slot item="{item}" index="{i}">
+            <slot {item} index={i}>
               {itemToString(item)}
             </slot>
             {#if selectedItem && selectedItem.id === item.id}
@@ -417,8 +409,8 @@
   </ListBox>
   {#if !invalid && helperText && !warn}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
     >
       {helperText}
     </div>

src/ComposedModal/ComposedModal.svelte

@@ -98,18 +98,18 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  bind:this="{ref}"
+  bind:this={ref}
   role="presentation"
-  class:bx--modal="{true}"
-  class:is-visible="{open}"
-  class:bx--modal--danger="{danger}"
+  class:bx--modal={true}
+  class:is-visible={open}
+  class:bx--modal--danger={danger}
   {...$$restProps}
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (open) {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         open = false;
-      } else if (e.key === 'Tab') {
+      } else if (e.key === "Tab") {
         // taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
         const selectorTabbable = `
   a[href], area[href], input:not([disabled]):not([tabindex='-1']),
@@ -130,41 +130,41 @@
         e.preventDefault();
       }
     }
-  }}"
+  }}
   on:click
-  on:click="{() => {
+  on:click={() => {
     if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
     didClickInnerModal = false;
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:transitionend="{({ propertyName, currentTarget }) => {
-    if (propertyName === 'transform') {
-      dispatch('transitionend', { open });
+  on:transitionend={({ propertyName, currentTarget }) => {
+    if (propertyName === "transform") {
+      dispatch("transitionend", { open });
     }
 
     if (didOpen) {
       focus(currentTarget);
       didOpen = false;
     }
-  }}"
+  }}
 >
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <div
-    bind:this="{innerModal}"
+    bind:this={innerModal}
     role="dialog"
     aria-modal="true"
-    aria-label="{$$props['aria-label'] || $label || undefined}"
-    class:bx--modal-container="{true}"
-    class:bx--modal-container--xs="{size === 'xs'}"
-    class:bx--modal-container--sm="{size === 'sm'}"
-    class:bx--modal-container--lg="{size === 'lg'}"
-    class="{containerClass}"
-    on:click="{() => {
+    aria-label={$$props["aria-label"] || $label || undefined}
+    class:bx--modal-container={true}
+    class:bx--modal-container--xs={size === "xs"}
+    class:bx--modal-container--sm={size === "sm"}
+    class:bx--modal-container--lg={size === "lg"}
+    class={containerClass}
+    on:click={() => {
       didClickInnerModal = true;
-    }}"
+    }}
   >
     <slot />
   </div>

src/ComposedModal/ModalBody.svelte

@@ -8,15 +8,15 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
-  tabindex="{hasScrollingContent ? '0' : undefined}"
-  role="{hasScrollingContent ? 'region' : undefined}"
-  class:bx--modal-content="{true}"
-  class:bx--modal-content--with-form="{hasForm}"
-  class:bx--modal-scroll-content="{hasScrollingContent}"
+  tabindex={hasScrollingContent ? "0" : undefined}
+  role={hasScrollingContent ? "region" : undefined}
+  class:bx--modal-content={true}
+  class:bx--modal-content--with-form={hasForm}
+  class:bx--modal-scroll-content={hasScrollingContent}
   {...$$restProps}
 >
   <slot />
 </div>
 {#if hasScrollingContent}
-  <div class:bx--modal-content--overflow-indicator="{true}"></div>
+  <div class:bx--modal-content--overflow-indicator={true}></div>
 {/if}

src/ComposedModal/ModalFooter.svelte

@@ -48,17 +48,17 @@
 </script>
 
 <div
-  class:bx--modal-footer="{true}"
-  class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
+  class:bx--modal-footer={true}
+  class:bx--modal-footer--three-button={secondaryButtons.length === 2}
   {...$$restProps}
 >
   {#if secondaryButtons.length > 0}
     {#each secondaryButtons as button}
       <Button
         kind="secondary"
-        on:click="{() => {
-          dispatch('click:button--secondary', { text: button.text });
-        }}"
+        on:click={() => {
+          dispatch("click:button--secondary", { text: button.text });
+        }}
       >
         {button.text}
       </Button>
@@ -66,22 +66,22 @@
   {:else if secondaryButtonText}
     <Button
       kind="secondary"
-      class="{secondaryClass}"
-      on:click="{() => {
+      class={secondaryClass}
+      on:click={() => {
         closeModal();
-        dispatch('click:button--secondary', { text: secondaryButtonText });
-      }}"
+        dispatch("click:button--secondary", { text: secondaryButtonText });
+      }}
     >
       {secondaryButtonText}
     </Button>
   {/if}
   {#if primaryButtonText}
     <Button
-      kind="{danger ? 'danger' : 'primary'}"
-      disabled="{primaryButtonDisabled}"
-      class="{primaryClass}"
-      icon="{primaryButtonIcon}"
-      on:click="{submit}"
+      kind={danger ? "danger" : "primary"}
+      disabled={primaryButtonDisabled}
+      class={primaryClass}
+      icon={primaryButtonIcon}
+      on:click={submit}
     >
       {primaryButtonText}
     </Button>

src/ComposedModal/ModalHeader.svelte

@@ -28,21 +28,21 @@
   $: updateLabel(label);
 </script>
 
-<div class:bx--modal-header="{true}" {...$$restProps}>
+<div class:bx--modal-header={true} {...$$restProps}>
   {#if label}
     <h2
-      class:bx--modal-header__label="{true}"
-      class:bx--type-delta="{true}"
-      class="{labelClass}"
+      class:bx--modal-header__label={true}
+      class:bx--type-delta={true}
+      class={labelClass}
     >
       {label}
     </h2>
   {/if}
   {#if title}
     <h3
-      class:bx--modal-header__heading="{true}"
-      class:bx--type-beta="{true}"
-      class="{titleClass}"
+      class:bx--modal-header__heading={true}
+      class:bx--type-beta={true}
+      class={titleClass}
     >
       {title}
     </h3>
@@ -50,14 +50,14 @@
   <slot />
   <button
     type="button"
-    aria-label="{iconDescription}"
-    class:bx--modal-close="{true}"
-    class="{closeClass}"
+    aria-label={iconDescription}
+    class:bx--modal-close={true}
+    class={closeClass}
     on:click
-    on:click="{closeModal}"
+    on:click={closeModal}
   >
     <Close
-      size="{20}"
+      size={20}
       class="bx--modal-close__icon {closeIconClass}"
       aria-hidden="true"
     />

src/ContentSwitcher/ContentSwitcher.svelte

@@ -61,9 +61,9 @@
 <!-- svelte-ignore a11y-interactive-supports-focus -->
 <div
   role="tablist"
-  class:bx--content-switcher="{true}"
-  class:bx--content-switcher--sm="{size === 'sm'}"
-  class:bx--content-switcher--xl="{size === 'xl'}"
+  class:bx--content-switcher={true}
+  class:bx--content-switcher--sm={size === "sm"}
+  class:bx--content-switcher--xl={size === "xl"}
   {...$$restProps}
   on:click
   on:mouseover

src/ContentSwitcher/Switch.svelte

@@ -40,33 +40,33 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
-  bind:this="{ref}"
+  bind:this={ref}
   type="button"
   role="tab"
-  tabindex="{selected ? '0' : '-1'}"
-  aria-selected="{selected}"
-  disabled="{disabled}"
-  id="{id}"
-  class:bx--content-switcher-btn="{true}"
-  class:bx--content-switcher--selected="{selected}"
+  tabindex={selected ? "0" : "-1"}
+  aria-selected={selected}
+  {disabled}
+  {id}
+  class:bx--content-switcher-btn={true}
+  class:bx--content-switcher--selected={selected}
   {...$$restProps}
   on:click
-  on:click|preventDefault="{() => {
+  on:click|preventDefault={() => {
     ctx.update(id);
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown="{({ key }) => {
-    if (key === 'ArrowRight') {
+  on:keydown={({ key }) => {
+    if (key === "ArrowRight") {
       ctx.change(1);
-    } else if (key === 'ArrowLeft') {
+    } else if (key === "ArrowLeft") {
       ctx.change(-1);
     }
-  }}"
+  }}
 >
-  <span class:bx--content-switcher__label="{true}">
+  <span class:bx--content-switcher__label={true}>
     <slot>{text}</slot>
   </span>
 </button>

src/ContextMenu/ContextMenu.svelte

@@ -97,7 +97,7 @@
       if (target != null) {
         if (Array.isArray(target)) {
           target.forEach((node) =>
-            node?.removeEventListener("contextmenu", openMenu)
+            node?.removeEventListener("contextmenu", openMenu),
           );
         } else {
           target.removeEventListener("contextmenu", openMenu);
@@ -139,58 +139,58 @@
 </script>
 
 <svelte:window
-  on:contextmenu="{(e) => {
+  on:contextmenu={(e) => {
     if (target != null) return;
     if (level > 1) return;
     if (!ref) return;
     openMenu(e);
-  }}"
-  on:click="{(e) => {
+  }}
+  on:click={(e) => {
     if (!open) return;
     close();
-  }}"
-  on:keydown="{(e) => {
-    if (open && e.key === 'Escape') close();
-  }}"
+  }}
+  on:keydown={(e) => {
+    if (open && e.key === "Escape") close();
+  }}
 />
 
 <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <ul
-  bind:this="{ref}"
+  bind:this={ref}
   role="menu"
   tabindex="-1"
-  data-direction="{direction}"
-  data-level="{level}"
-  class:bx--menu="{true}"
-  class:bx--menu--open="{open}"
-  class:bx--menu--invisible="{open && x === 0 && y === 0}"
-  class:bx--menu--root="{level === 1}"
+  data-direction={direction}
+  data-level={level}
+  class:bx--menu={true}
+  class:bx--menu--open={open}
+  class:bx--menu--invisible={open && x === 0 && y === 0}
+  class:bx--menu--root={level === 1}
   style:left="{x}px"
   style:top="{y}px"
   {...$$restProps}
   on:click
-  on:click="{({ target }) => {
-    const closestOption = target.closest('[tabindex]');
+  on:click={({ target }) => {
+    const closestOption = target.closest("[tabindex]");
 
-    if (closestOption && closestOption.getAttribute('role') !== 'menuitem') {
+    if (closestOption && closestOption.getAttribute("role") !== "menuitem") {
       close();
     }
-  }}"
+  }}
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (open) e.preventDefault();
     if ($hasPopup) return;
 
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       if (focusIndex < options.length - 1) focusIndex++;
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       if (focusIndex === -1) {
         focusIndex = options.length - 1;
       } else {
         if (focusIndex > 0) focusIndex--;
       }
     }
-  }}"
+  }}
 >
   <slot />
 </ul>

src/ContextMenu/ContextMenuDivider.svelte

@@ -1 +1 @@
-<li role="separator" class:bx--menu-divider="{true}"></li>
+<li role="separator" class:bx--menu-divider={true}></li>

src/ContextMenu/ContextMenuGroup.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <li role="none">
-  <ul role="group" aria-label="{labelText}">
+  <ul role="group" aria-label={labelText}>
     <slot />
   </ul>
 </li>

src/ContextMenu/ContextMenuOption.svelte

@@ -167,46 +167,46 @@
 </script>
 
 <li
-  bind:this="{ref}"
-  role="{role}"
+  bind:this={ref}
+  {role}
   tabindex="-1"
-  aria-disabled="{!subOptions && disabled}"
-  aria-haspopup="{subOptions ? true : undefined}"
-  aria-expanded="{subOptions ? submenuOpen : undefined}"
-  class:bx--menu-option="{true}"
-  class:bx--menu-option--disabled="{true}"
-  class:bx--menu-option--active="{subOptions && submenuOpen}"
-  class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
-  indented="{indented}"
-  aria-checked="{isSelectable || isRadio ? selected : undefined}"
-  data-nested="{ref &&
-    ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
-  data-sub="{subOptions}"
-  data-id="{id}"
+  aria-disabled={!subOptions && disabled}
+  aria-haspopup={subOptions ? true : undefined}
+  aria-expanded={subOptions ? submenuOpen : undefined}
+  class:bx--menu-option={true}
+  class:bx--menu-option--disabled={true}
+  class:bx--menu-option--active={subOptions && submenuOpen}
+  class:bx--menu-option--danger={!subOptions && kind === "danger"}
+  {indented}
+  aria-checked={isSelectable || isRadio ? selected : undefined}
+  data-nested={ref &&
+    ref.closest(".bx--menu").getAttribute("data-level") === "2"}
+  data-sub={subOptions}
+  data-id={id}
   {...$$restProps}
   on:keydown
-  on:keydown="{async ({ key, target }) => {
+  on:keydown={async ({ key, target }) => {
     if (
       subOptions &&
-      (key === 'ArrowRight' || key === ' ' || key === 'Enter')
+      (key === "ArrowRight" || key === " " || key === "Enter")
     ) {
       submenuOpen = true;
       await tick();
-      options = [...ref.querySelectorAll('li[tabindex]')];
+      options = [...ref.querySelectorAll("li[tabindex]")];
       if (options[focusIndex]) options[focusIndex].focus();
       return;
     }
 
     if (submenuOpen) {
-      if (key === 'ArrowLeft') {
+      if (key === "ArrowLeft") {
         submenuOpen = false;
         focusIndex = 0;
         return;
       }
 
-      if (key === 'ArrowDown') {
+      if (key === "ArrowDown") {
         if (focusIndex < options.length - 1) focusIndex++;
-      } else if (key === 'ArrowUp') {
+      } else if (key === "ArrowUp") {
         if (focusIndex === -1) {
           focusIndex = options.length - 1;
         } else {
@@ -217,68 +217,68 @@
       if (options[focusIndex]) options[focusIndex].focus();
     }
 
-    if (key === ' ' || key === 'Enter') {
-      handleClick({ fromKeyboard: true, id: target.getAttribute('data-id') });
+    if (key === " " || key === "Enter") {
+      handleClick({ fromKeyboard: true, id: target.getAttribute("data-id") });
     }
-  }}"
+  }}
   on:mouseenter
-  on:mouseenter="{() => {
+  on:mouseenter={() => {
     if (subOptions) {
       timeoutHover = setTimeout(() => {
         submenuOpen = true;
       }, moderate01);
     }
-  }}"
+  }}
   on:mouseleave
-  on:mouseleave="{(e) => {
+  on:mouseleave={(e) => {
     if (subOptions) {
-      if (typeof timeoutHover === 'number') clearTimeout(timeoutHover);
+      if (typeof timeoutHover === "number") clearTimeout(timeoutHover);
       submenuOpen = false;
     }
-  }}"
-  on:click="{handleClick}"
+  }}
+  on:click={handleClick}
 >
   {#if subOptions}
     <div
-      class:bx--menu-option__content="{true}"
-      class:bx--menu-option__content--disabled="{disabled}"
+      class:bx--menu-option__content={true}
+      class:bx--menu-option__content--disabled={disabled}
     >
       {#if indented}
-        <div class:bx--menu-option__icon="{true}">
+        <div class:bx--menu-option__icon={true}>
           <slot name="icon">
-            <svelte:component this="{icon}" />
+            <svelte:component this={icon} />
           </slot>
         </div>
       {/if}
-      <span class:bx--menu-option__label="{true}" title="{labelText}">
+      <span class:bx--menu-option__label={true} title={labelText}>
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--menu-option__info="{true}"><CaretRight /></div>
+      <div class:bx--menu-option__info={true}><CaretRight /></div>
     </div>
 
     <ContextMenu
-      open="{submenuOpen}"
-      x="{submenuPosition[0]}"
-      y="{submenuPosition[1]}"
+      open={submenuOpen}
+      x={submenuPosition[0]}
+      y={submenuPosition[1]}
     >
       <slot />
     </ContextMenu>
   {:else}
     <div
-      class:bx--menu-option__content="{true}"
-      class:bx--menu-option__content--disabled="{disabled}"
+      class:bx--menu-option__content={true}
+      class:bx--menu-option__content--disabled={disabled}
     >
       {#if indented}
-        <div class:bx--menu-option__icon="{true}">
+        <div class:bx--menu-option__icon={true}>
           <slot name="icon">
-            <svelte:component this="{icon}" />
+            <svelte:component this={icon} />
           </slot>
         </div>
       {/if}
-      <span class:bx--menu-option__label="{true}" title="{labelText}">
+      <span class:bx--menu-option__label={true} title={labelText}>
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--menu-option__info="{true}">
+      <div class:bx--menu-option__info={true}>
         <slot name="shortcutText">{shortcutText}</slot>
       </div>
     </div>

src/ContextMenu/ContextMenuRadioGroup.svelte

@@ -28,7 +28,7 @@
 </script>
 
 <li role="none">
-  <ul role="group" aria-label="{labelText}">
+  <ul role="group" aria-label={labelText}>
     <slot />
   </ul>
 </li>

src/CopyButton/CopyButton.svelte

@@ -43,39 +43,39 @@
 <button
   type="button"
   aria-live="polite"
-  class:bx--copy-btn="{true}"
-  class:bx--copy="{true}"
-  class:bx--copy-btn--animating="{animation}"
-  class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
-  class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
-  aria-label="{iconDescription}"
-  title="{iconDescription}"
+  class:bx--copy-btn={true}
+  class:bx--copy={true}
+  class:bx--copy-btn--animating={animation}
+  class:bx--copy-btn--fade-in={animation === "fade-in"}
+  class:bx--copy-btn--fade-out={animation === "fade-out"}
+  aria-label={iconDescription}
+  title={iconDescription}
   {...$$restProps}
   on:click
-  on:click="{() => {
+  on:click={() => {
     if (text !== undefined) {
       copy(text);
-      dispatch('copy');
+      dispatch("copy");
     }
 
-    if (animation === 'fade-in') return;
-    animation = 'fade-in';
+    if (animation === "fade-in") return;
+    animation = "fade-in";
     timeout = setTimeout(() => {
-      animation = 'fade-out';
+      animation = "fade-out";
     }, feedbackTimeout);
-  }}"
+  }}
   on:animationend
-  on:animationend="{({ animationName }) => {
-    if (animationName === 'hide-feedback') {
+  on:animationend={({ animationName }) => {
+    if (animationName === "hide-feedback") {
       animation = undefined;
     }
-  }}"
+  }}
 >
   <Copy class="bx--snippet__icon" />
   <span
     aria-hidden="true"
-    class:bx--assistive-text="{true}"
-    class:bx--copy-btn__feedback="{true}"
+    class:bx--assistive-text={true}
+    class:bx--copy-btn__feedback={true}
   >
     {feedback}
   </span>

src/DataTable/DataTable.svelte

@@ -227,7 +227,7 @@
 
   $: expandedRows = expandedRowIds.reduce(
     (a, id) => ({ ...a, [id]: true }),
-    {}
+    {},
   );
 
   let refSelectAll = null;
@@ -235,10 +235,10 @@
   $: batchSelectedIds.set(selectedRowIds);
   $: rowIds = $tableRows.map((row) => row.id);
   $: expandableRowIds = rowIds.filter(
-    (id) => !nonExpandableRowIds.includes(id)
+    (id) => !nonExpandableRowIds.includes(id),
   );
   $: selectableRowIds = rowIds.filter(
-    (id) => !nonSelectableRowIds.includes(id)
+    (id) => !nonSelectableRowIds.includes(id),
   );
   $: selectAll =
     selectableRowIds.length > 0 &&
@@ -300,7 +300,7 @@
   $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
 
   $: hasCustomHeaderWidth = headers.some(
-    (header) => header.width || header.minWidth
+    (header) => header.width || header.minWidth,
   );
 
   /** @type {(header: DataTableHeader) => undefined | string} */
@@ -314,16 +314,16 @@
   };
 </script>
 
-<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
+<TableContainer {useStaticWidth} {...$$restProps}>
   {#if title || $$slots.title || description || $$slots.description}
-    <div class:bx--data-table-header="{true}">
+    <div class:bx--data-table-header={true}>
       {#if title || $$slots.title}
-        <h4 class:bx--data-table-header__title="{true}">
+        <h4 class:bx--data-table-header__title={true}>
           <slot name="title">{title}</slot>
         </h4>
       {/if}
       {#if description || $$slots.description}
-        <p class:bx--data-table-header__description="{true}">
+        <p class:bx--data-table-header__description={true}>
           <slot name="description">{description}</slot>
         </p>
       {/if}
@@ -331,31 +331,31 @@
   {/if}
   <slot />
   <Table
-    zebra="{zebra}"
-    size="{size}"
-    stickyHeader="{stickyHeader}"
-    sortable="{sortable}"
-    useStaticWidth="{useStaticWidth}"
-    tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}"
+    {zebra}
+    {size}
+    {stickyHeader}
+    {sortable}
+    {useStaticWidth}
+    tableStyle={hasCustomHeaderWidth && "table-layout: fixed"}
   >
     <TableHead>
       <TableRow>
         {#if expandable}
           <th
             scope="col"
-            class:bx--table-expand="{true}"
-            data-previous-value="{expanded ? 'collapsed' : undefined}"
+            class:bx--table-expand={true}
+            data-previous-value={expanded ? "collapsed" : undefined}
           >
             {#if batchExpansion}
               <button
                 type="button"
-                class:bx--table-expand__button="{true}"
-                on:click="{() => {
+                class:bx--table-expand__button={true}
+                on:click={() => {
                   expanded = !expanded;
                   expandedRowIds = expanded ? expandableRowIds : [];
 
-                  dispatch('click:header--expand', { expanded });
-                }}"
+                  dispatch("click:header--expand", { expanded });
+                }}
               >
                 <ChevronRight class="bx--table-expand__svg" />
               </button>
@@ -366,14 +366,14 @@
           <th scope="col"></th>
         {/if}
         {#if batchSelection && !radio}
-          <th scope="col" class:bx--table-column-checkbox="{true}">
+          <th scope="col" class:bx--table-column-checkbox={true}>
             <InlineCheckbox
-              bind:ref="{refSelectAll}"
+              bind:ref={refSelectAll}
               aria-label="Select all rows"
-              checked="{selectAll}"
-              indeterminate="{indeterminate}"
-              on:change="{(e) => {
-                dispatch('click:header--select', {
+              checked={selectAll}
+              {indeterminate}
+              on:change={(e) => {
+                dispatch("click:header--select", {
                   indeterminate,
                   selected: !indeterminate && e.target.checked,
                 });
@@ -390,36 +390,36 @@
                 } else {
                   selectedRowIds = [];
                 }
-              }}"
+              }}
             />
           </th>
         {/if}
         {#each headers as header (header.key)}
           {#if header.empty}
-            <th scope="col" style="{formatHeaderWidth(header)}"></th>
+            <th scope="col" style={formatHeaderWidth(header)}></th>
           {:else}
             <TableHeader
-              id="{header.key}"
-              style="{formatHeaderWidth(header)}"
-              sortable="{sortable && header.sort !== false}"
-              sortDirection="{sortKey === header.key ? sortDirection : 'none'}"
-              active="{sortKey === header.key}"
-              on:click="{() => {
-                dispatch('click', { header });
+              id={header.key}
+              style={formatHeaderWidth(header)}
+              sortable={sortable && header.sort !== false}
+              sortDirection={sortKey === header.key ? sortDirection : "none"}
+              active={sortKey === header.key}
+              on:click={() => {
+                dispatch("click", { header });
 
                 if (header.sort === false) {
-                  dispatch('click:header', { header });
+                  dispatch("click:header", { header });
                 } else {
                   let currentSortDirection =
-                    sortKey === header.key ? sortDirection : 'none';
+                    sortKey === header.key ? sortDirection : "none";
                   sortDirection = sortDirectionMap[currentSortDirection];
                   sortKey =
-                    sortDirection === 'none' ? null : thKeys[header.key];
-                  dispatch('click:header', { header, sortDirection });
+                    sortDirection === "none" ? null : thKeys[header.key];
+                  dispatch("click:header", { header, sortDirection });
                 }
-              }}"
+              }}
             >
-              <slot name="cell-header" header="{header}">{header.value}</slot>
+              <slot name="cell-header" {header}>{header.value}</slot>
             </TableHeader>
           {/if}
         {/each}
@@ -428,8 +428,8 @@
     <TableBody>
       {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
         <TableRow
-          data-row="{row.id}"
-          data-parent-row="{expandable ? true : undefined}"
+          data-row={row.id}
+          data-parent-row={expandable ? true : undefined}
           class="{selectedRowIds.includes(row.id)
             ? 'bx--data-table--selected'
             : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
@@ -437,54 +437,54 @@
             : ''} {expandable && parentRowId === row.id
             ? 'bx--expandable-row--hover'
             : ''}"
-          on:click="{({ target }) => {
+          on:click={({ target }) => {
             // forgo "click", "click:row" events if target
             // resembles an overflow menu, a checkbox, or radio button
             if (
               [...target.classList].some((name) =>
-                /^bx--(overflow-menu|checkbox|radio-button)/.test(name)
+                /^bx--(overflow-menu|checkbox|radio-button)/.test(name),
               )
             ) {
               return;
             }
-            dispatch('click', { row });
-            dispatch('click:row', row);
-          }}"
-          on:mouseenter="{() => {
-            dispatch('mouseenter:row', row);
-          }}"
-          on:mouseleave="{() => {
-            dispatch('mouseleave:row', row);
-          }}"
+            dispatch("click", { row });
+            dispatch("click:row", row);
+          }}
+          on:mouseenter={() => {
+            dispatch("mouseenter:row", row);
+          }}
+          on:mouseleave={() => {
+            dispatch("mouseleave:row", row);
+          }}
         >
           {#if expandable}
             <TableCell
               class="bx--table-expand"
               headers="expand"
-              data-previous-value="{!nonExpandableRowIds.includes(row.id) &&
+              data-previous-value={!nonExpandableRowIds.includes(row.id) &&
               expandedRows[row.id]
-                ? 'collapsed'
-                : undefined}"
+                ? "collapsed"
+                : undefined}
             >
               {#if !nonExpandableRowIds.includes(row.id)}
                 <button
                   type="button"
-                  class:bx--table-expand__button="{true}"
-                  aria-label="{expandedRows[row.id]
-                    ? 'Collapse current row'
-                    : 'Expand current row'}"
-                  on:click|stopPropagation="{() => {
+                  class:bx--table-expand__button={true}
+                  aria-label={expandedRows[row.id]
+                    ? "Collapse current row"
+                    : "Expand current row"}
+                  on:click|stopPropagation={() => {
                     const rowExpanded = !!expandedRows[row.id];
 
                     expandedRowIds = rowExpanded
                       ? expandedRowIds.filter((id) => id !== row.id)
                       : [...expandedRowIds, row.id];
 
-                    dispatch('click:row--expand', {
+                    dispatch("click:row--expand", {
                       row,
                       expanded: !rowExpanded,
                     });
-                  }}"
+                  }}
                 >
                   <ChevronRight class="bx--table-expand__svg" />
                 </button>
@@ -493,34 +493,34 @@
           {/if}
           {#if selectable}
             <td
-              class:bx--table-column-checkbox="{true}"
-              class:bx--table-column-radio="{radio}"
+              class:bx--table-column-checkbox={true}
+              class:bx--table-column-radio={radio}
             >
               {#if !nonSelectableRowIds.includes(row.id)}
                 {#if radio}
                   <RadioButton
                     name="select-row-{row.id}"
-                    checked="{selectedRowIds.includes(row.id)}"
-                    on:change="{() => {
+                    checked={selectedRowIds.includes(row.id)}
+                    on:change={() => {
                       selectedRowIds = [row.id];
-                      dispatch('click:row--select', { row, selected: true });
-                    }}"
+                      dispatch("click:row--select", { row, selected: true });
+                    }}
                   />
                 {:else}
                   <InlineCheckbox
                     name="select-row-{row.id}"
-                    checked="{selectedRowIds.includes(row.id)}"
-                    on:change="{() => {
+                    checked={selectedRowIds.includes(row.id)}
+                    on:change={() => {
                       if (selectedRowIds.includes(row.id)) {
                         selectedRowIds = selectedRowIds.filter(
-                          (id) => id !== row.id
+                          (id) => id !== row.id,
                         );
-                        dispatch('click:row--select', { row, selected: false });
+                        dispatch("click:row--select", { row, selected: false });
                       } else {
                         selectedRowIds = [...selectedRowIds, row.id];
-                        dispatch('click:row--select', { row, selected: true });
+                        dispatch("click:row--select", { row, selected: true });
                       }
-                    }}"
+                    }}
                   />
                 {/if}
               {/if}
@@ -528,31 +528,19 @@
           {/if}
           {#each tableCellsByRowId[row.id] as cell, j (cell.key)}
             {#if headers[j].empty}
-              <td class:bx--table-column-menu="{headers[j].columnMenu}">
-                <slot
-                  name="cell"
-                  row="{row}"
-                  cell="{cell}"
-                  rowIndex="{i}"
-                  cellIndex="{j}"
-                >
+              <td class:bx--table-column-menu={headers[j].columnMenu}>
+                <slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
                   {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
               </td>
             {:else}
               <TableCell
-                on:click="{() => {
-                  dispatch('click', { row, cell });
-                  dispatch('click:cell', cell);
-                }}"
+                on:click={() => {
+                  dispatch("click", { row, cell });
+                  dispatch("click:cell", cell);
+                }}
               >
-                <slot
-                  name="cell"
-                  row="{row}"
-                  cell="{cell}"
-                  rowIndex="{i}"
-                  cellIndex="{j}"
-                >
+                <slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
                   {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
               </TableCell>
@@ -563,22 +551,22 @@
         {#if expandable}
           <tr
             data-child-row
-            class:bx--expandable-row="{true}"
-            on:mouseenter="{() => {
+            class:bx--expandable-row={true}
+            on:mouseenter={() => {
               if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = row.id;
-            }}"
-            on:mouseleave="{() => {
+            }}
+            on:mouseleave={() => {
               if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = null;
-            }}"
+            }}
           >
             {#if expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
               <TableCell
-                colspan="{selectable ? headers.length + 2 : headers.length + 1}"
+                colspan={selectable ? headers.length + 2 : headers.length + 1}
               >
-                <div class:bx--child-row-inner-container="{true}">
-                  <slot name="expanded-row" row="{row}" />
+                <div class:bx--child-row-inner-container={true}>
+                  <slot name="expanded-row" {row} />
                 </div>
               </TableCell>
             {/if}

src/DataTable/DataTableSkeleton.svelte

@@ -33,45 +33,46 @@
   export let showToolbar = true;
 
   $: values = headers.map((header) =>
-    header.value !== undefined ? header.value : header
+    header.value !== undefined ? header.value : header,
   );
   $: cols = Array.from(
     { length: headers.length > 0 ? headers.length : columns },
-    (_, i) => i
+    (_, i) => i,
   );
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--data-table-container="{true}"
+  class:bx--skeleton={true}
+  class:bx--data-table-container={true}
   {...$$restProps}
 >
   {#if showHeader}
-    <div class:bx--data-table-header="{true}">
-      <div class:bx--data-table-header__title="{true}"></div>
-      <div class:bx--data-table-header__description="{true}"></div>
+    <div class:bx--data-table-header={true}>
+      <div class:bx--data-table-header__title={true}></div>
+      <div class:bx--data-table-header__description={true}></div>
     </div>
   {/if}
   {#if showToolbar}
-    <section aria-label="data table toolbar" class:bx--table-toolbar="{true}">
-      <div class:bx--toolbar-content="{true}">
+    <section aria-label="data table toolbar" class:bx--table-toolbar={true}>
+      <div class:bx--toolbar-content={true}>
         <span
-          class:bx--skeleton="{true}"
-          class:bx--btn="{true}"
-          class:bx--btn--sm="{true}"></span>
+          class:bx--skeleton={true}
+          class:bx--btn={true}
+          class:bx--btn--sm={true}
+        ></span>
       </div>
     </section>
   {/if}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <table
-    class:bx--skeleton="{true}"
-    class:bx--data-table="{true}"
-    class:bx--data-table--compact="{size === 'compact'}"
-    class:bx--data-table--short="{size === 'short'}"
-    class:bx--data-table--tall="{size === 'tall'}"
-    class:bx--data-table--zebra="{zebra}"
+    class:bx--skeleton={true}
+    class:bx--data-table={true}
+    class:bx--data-table--compact={size === "compact"}
+    class:bx--data-table--short={size === "short"}
+    class:bx--data-table--tall={size === "tall"}
+    class:bx--data-table--zebra={zebra}
     on:click
     on:mouseover
     on:mouseenter

src/DataTable/DataTableTypes.d.ts

@@ -2,17 +2,17 @@ type PathDepth = [never, 0, 1, 2, ...0[]];
 
 type Join<K, P> = K extends string | number
   ? P extends string | number
-  ? `${K}${"" extends P ? "" : "."}${P}`
-  : never
+    ? `${K}${"" extends P ? "" : "."}${P}`
+    : never
   : never;
 
 // For performance, the maximum traversal depth is 10.
 export type PropertyPath<T, D extends number = 10> = [D] extends [never]
   ? never
   : T extends object
-  ? {
-    [K in keyof T]-?: K extends string | number
-    ? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
-    : never;
-  }[keyof T]
-  : "";
+    ? {
+        [K in keyof T]-?: K extends string | number
+          ? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
+          : never;
+      }[keyof T]
+    : "";

src/DataTable/Table.svelte

@@ -25,35 +25,35 @@
 </script>
 
 {#if stickyHeader}
-  <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
+  <section class:bx--data-table_inner-container={true} {...$$restProps}>
     <table
-      class:bx--data-table="{true}"
-      class:bx--data-table--compact="{size === 'compact'}"
-      class:bx--data-table--short="{size === 'short'}"
-      class:bx--data-table--tall="{size === 'tall'}"
-      class:bx--data-table--md="{size === 'medium'}"
-      class:bx--data-table--sort="{sortable}"
-      class:bx--data-table--zebra="{zebra}"
-      class:bx--data-table--static="{useStaticWidth}"
-      class:bx--data-table--sticky-header="{stickyHeader}"
-      style="{tableStyle}"
+      class:bx--data-table={true}
+      class:bx--data-table--compact={size === "compact"}
+      class:bx--data-table--short={size === "short"}
+      class:bx--data-table--tall={size === "tall"}
+      class:bx--data-table--md={size === "medium"}
+      class:bx--data-table--sort={sortable}
+      class:bx--data-table--zebra={zebra}
+      class:bx--data-table--static={useStaticWidth}
+      class:bx--data-table--sticky-header={stickyHeader}
+      style={tableStyle}
     >
       <slot />
     </table>
   </section>
 {:else}
   <table
-    class:bx--data-table="{true}"
-    class:bx--data-table--compact="{size === 'compact'}"
-    class:bx--data-table--short="{size === 'short'}"
-    class:bx--data-table--tall="{size === 'tall'}"
-    class:bx--data-table--md="{size === 'medium'}"
-    class:bx--data-table--sort="{sortable}"
-    class:bx--data-table--zebra="{zebra}"
-    class:bx--data-table--static="{useStaticWidth}"
-    class:bx--data-table--sticky-header="{stickyHeader}"
+    class:bx--data-table={true}
+    class:bx--data-table--compact={size === "compact"}
+    class:bx--data-table--short={size === "short"}
+    class:bx--data-table--tall={size === "tall"}
+    class:bx--data-table--md={size === "medium"}
+    class:bx--data-table--sort={sortable}
+    class:bx--data-table--zebra={zebra}
+    class:bx--data-table--static={useStaticWidth}
+    class:bx--data-table--sticky-header={stickyHeader}
     {...$$restProps}
-    style="{tableStyle}"
+    style={tableStyle}
   >
     <slot />
   </table>

src/DataTable/TableContainer.svelte

@@ -13,15 +13,15 @@
 </script>
 
 <div
-  class:bx--data-table-container="{true}"
-  class:bx--data-table-container--static="{useStaticWidth}"
-  class:bx--data-table--max-width="{stickyHeader}"
+  class:bx--data-table-container={true}
+  class:bx--data-table-container--static={useStaticWidth}
+  class:bx--data-table--max-width={stickyHeader}
   {...$$restProps}
 >
   {#if title}
-    <div class:bx--data-table-header="{true}">
-      <h4 class:bx--data-table-header__title="{true}">{title}</h4>
-      <p class:bx--data-table-header__description="{true}">{description}</p>
+    <div class:bx--data-table-header={true}>
+      <h4 class:bx--data-table-header__title={true}>{title}</h4>
+      <p class:bx--data-table-header__description={true}>{description}</p>
     </div>
   {/if}
   <slot />

src/DataTable/TableHeader.svelte

@@ -33,9 +33,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if sortable}
   <th
-    aria-sort="{active ? sortDirection : 'none'}"
-    scope="{scope}"
-    data-header="{id}"
+    aria-sort={active ? sortDirection : "none"}
+    {scope}
+    data-header={id}
     {...$$restProps}
     on:mouseover
     on:mouseenter
@@ -43,38 +43,33 @@
   >
     <button
       type="button"
-      class:bx--table-sort="{true}"
-      class:bx--table-sort--active="{active}"
-      class:bx--table-sort--ascending="{active &&
-        sortDirection === 'descending'}"
+      class:bx--table-sort={true}
+      class:bx--table-sort--active={active}
+      class:bx--table-sort--ascending={active && sortDirection === "descending"}
       on:click
     >
-      <div class:bx--table-header-label="{true}">
+      <div class:bx--table-header-label={true}>
         <slot />
       </div>
-      <ArrowUp
-        size="{20}"
-        aria-label="{ariaLabel}"
-        class="bx--table-sort__icon"
-      />
+      <ArrowUp size={20} aria-label={ariaLabel} class="bx--table-sort__icon" />
       <ArrowsVertical
-        size="{20}"
-        aria-label="{ariaLabel}"
+        size={20}
+        aria-label={ariaLabel}
         class="bx--table-sort__icon-unsorted"
       />
     </button>
   </th>
 {:else}
   <th
-    scope="{scope}"
-    data-header="{id}"
+    {scope}
+    data-header={id}
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
   >
-    <div class:bx--table-header-label="{true}">
+    <div class:bx--table-header-label={true}>
       <slot />
     </div>
   </th>

src/DataTable/Toolbar.svelte

@@ -22,12 +22,12 @@
 </script>
 
 <section
-  bind:this="{ref}"
+  bind:this={ref}
   aria-label="data table toolbar"
-  class:bx--table-toolbar="{true}"
-  class:bx--table-toolbar--small="{size === 'sm'}"
-  class:bx--table-toolbar--normal="{size === 'default'}"
-  style:z-index="{1}"
+  class:bx--table-toolbar={true}
+  class:bx--table-toolbar--small={size === "sm"}
+  class:bx--table-toolbar--normal={size === "default"}
+  style:z-index={1}
   {...$$restProps}
 >
   <slot />

src/DataTable/ToolbarBatchActions.svelte

@@ -76,21 +76,21 @@
 
 {#if !overflowVisible}
   <div
-    class:bx--batch-actions="{true}"
-    class:bx--batch-actions--active="{showActions}"
+    class:bx--batch-actions={true}
+    class:bx--batch-actions--active={showActions}
     {...$$restProps}
   >
-    <div class:bx--batch-summary="{true}">
-      <p class:bx--batch-summary__para="{true}">
+    <div class:bx--batch-summary={true}>
+      <p class:bx--batch-summary__para={true}>
         <span> {formatTotalSelected(batchSelectedIds.length)} </span>
       </p>
     </div>
-    <div class:bx--action-list="{true}">
+    <div class:bx--action-list={true}>
       <slot />
       <Button
         class="bx--batch-summary__cancel"
-        tabindex="{showActions ? '0' : '-1'}"
-        on:click="{cancel}"
+        tabindex={showActions ? "0" : "-1"}
+        on:click={cancel}
       >
         <slot name="cancel">Cancel</slot>
       </Button>

src/DataTable/ToolbarContent.svelte

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

src/DataTable/ToolbarMenu.svelte

@@ -14,7 +14,7 @@
 
 <OverflowMenu
   bind:menuRef
-  icon="{Settings}"
+  icon={Settings}
   {...$$restProps}
   class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
   flipped

src/DataTable/ToolbarSearch.svelte

@@ -76,22 +76,22 @@
 </script>
 
 <Search
-  tabindex="{tabindex}"
-  disabled="{disabled}"
+  {tabindex}
+  {disabled}
   {...$$restProps}
   searchClass="{classes} {$$restProps.class}"
   bind:ref
   bind:value
   on:clear
-  on:clear="{expandSearch}"
+  on:clear={expandSearch}
   on:change
   on:input
   on:focus
-  on:focus="{expandSearch}"
+  on:focus={expandSearch}
   on:blur
-  on:blur="{() => {
+  on:blur={() => {
     expanded = !persistent && !!value.length;
-  }}"
+  }}
   on:keyup
   on:keydown
   on:paste

src/DatePicker/DatePicker.svelte

@@ -80,7 +80,7 @@
   const inputIds = derived(inputs, (_) => _.map(({ id }) => id));
   const labelTextEmpty = derived(
     inputs,
-    (_) => _.filter(({ labelText }) => !!labelText).length === 0
+    (_) => _.filter(({ labelText }) => !!labelText).length === 0,
   );
   const inputValue = writable(value);
   const inputValueFrom = writable(valueFrom);
@@ -183,7 +183,7 @@
     calendar?.calendarContainer?.setAttribute("role", "application");
     calendar?.calendarContainer?.setAttribute(
       "aria-label",
-      "calendar-container"
+      "calendar-container",
     );
   }
 
@@ -230,17 +230,17 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (!calendar || !calendar.isOpen) return;
     if (datePickerRef && datePickerRef.contains(target)) return;
     if (!calendar.calendarContainer.contains(target)) calendar.close();
-  }}"
+  }}
 />
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -249,22 +249,22 @@
 >
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    bind:this="{datePickerRef}"
-    id="{id}"
-    class:bx--date-picker="{true}"
-    class:bx--date-picker--short="{short}"
-    class:bx--date-picker--light="{light}"
-    class:bx--date-picker--simple="{datePickerType === 'simple'}"
-    class:bx--date-picker--single="{datePickerType === 'single'}"
-    class:bx--date-picker--range="{datePickerType === 'range'}"
-    class:bx--date-picker--nolabel="{datePickerType === 'range' &&
-      $labelTextEmpty}"
-    on:keydown="{(e) => {
-      if (calendar?.isOpen && e.key === 'Escape') {
+    bind:this={datePickerRef}
+    {id}
+    class:bx--date-picker={true}
+    class:bx--date-picker--short={short}
+    class:bx--date-picker--light={light}
+    class:bx--date-picker--simple={datePickerType === "simple"}
+    class:bx--date-picker--single={datePickerType === "single"}
+    class:bx--date-picker--range={datePickerType === "range"}
+    class:bx--date-picker--nolabel={datePickerType === "range" &&
+      $labelTextEmpty}
+    on:keydown={(e) => {
+      if (calendar?.isOpen && e.key === "Escape") {
         e.stopPropagation();
         calendar.close();
       }
-    }}"
+    }}
   >
     <slot />
   </div>

src/DatePicker/DatePickerInput.svelte

@@ -79,15 +79,15 @@
 </script>
 
 <div
-  class:bx--date-picker-container="{true}"
-  class:bx--date-picker--nolabel="{!labelText}"
+  class:bx--date-picker-container={true}
+  class:bx--date-picker--nolabel={!labelText}
 >
   {#if labelText || $$slots.labelText}
     <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--visually-hidden="{hideLabel}"
-      class:bx--label--disabled="{disabled}"
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}
     >
       <slot name="labelText">
         {labelText}
@@ -95,47 +95,47 @@
     </label>
   {/if}
   <div
-    class:bx--date-picker-input__wrapper="{true}"
-    class:bx--date-picker-input__wrapper--invalid="{invalid}"
-    class:bx--date-picker-input__wrapper--warn="{warn}"
+    class:bx--date-picker-input__wrapper={true}
+    class:bx--date-picker-input__wrapper--invalid={invalid}
+    class:bx--date-picker-input__wrapper--warn={warn}
   >
     <input
-      bind:this="{ref}"
-      data-invalid="{invalid || undefined}"
-      id="{id}"
-      name="{name}"
-      placeholder="{placeholder}"
-      type="{type}"
-      pattern="{pattern}"
-      disabled="{disabled}"
+      bind:this={ref}
+      data-invalid={invalid || undefined}
+      {id}
+      {name}
+      {placeholder}
+      {type}
+      {pattern}
+      {disabled}
       {...$$restProps}
-      value="{$range
+      value={$range
         ? $inputIds.indexOf(id) === 0
           ? $inputValueFrom
           : $inputValueTo
-        : $inputValue}"
-      class:bx--date-picker__input="{true}"
-      class:bx--date-picker__input--invalid="{invalid}"
-      class:bx--date-picker__input--sm="{size === 'sm'}"
-      class:bx--date-picker__input--xl="{size === 'xl'}"
+        : $inputValue}
+      class:bx--date-picker__input={true}
+      class:bx--date-picker__input--invalid={invalid}
+      class:bx--date-picker__input--sm={size === "sm"}
+      class:bx--date-picker__input--xl={size === "xl"}
       on:input
-      on:input="{({ target }) => {
-        updateValue({ type: 'input', value: target.value });
-      }}"
-      on:change="{({ target }) => {
-        updateValue({ type: 'change', value: target.value });
-      }}"
+      on:input={({ target }) => {
+        updateValue({ type: "input", value: target.value });
+      }}
+      on:change={({ target }) => {
+        updateValue({ type: "change", value: target.value });
+      }}
       on:keydown
-      on:keydown="{({ key }) => {
-        if (key === 'ArrowDown') {
+      on:keydown={({ key }) => {
+        if (key === "ArrowDown") {
           focusCalendar();
         }
-      }}"
+      }}
       on:keyup
       on:blur
-      on:blur="{({ relatedTarget }) => {
+      on:blur={({ relatedTarget }) => {
         blurInput(relatedTarget);
-      }}"
+      }}
       on:paste
     />
     {#if invalid}
@@ -151,21 +151,21 @@
     {#if $hasCalendar && !invalid && !warn}
       <Calendar
         class="bx--date-picker__icon"
-        aria-label="{iconDescription}"
-        on:click="{openCalendar}"
+        aria-label={iconDescription}
+        on:click={openCalendar}
       />
     {/if}
   </div>
   {#if invalid}
-    <div class:bx--form-requirement="{true}">{invalidText}</div>
+    <div class:bx--form-requirement={true}>{invalidText}</div>
   {/if}
   {#if !invalid && warn}
-    <div class:bx--form-requirement="{true}">{warnText}</div>
+    <div class:bx--form-requirement={true}>{warnText}</div>
   {/if}
   {#if !invalid && !warn && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
     >
       {helperText}
     </div>

src/DatePicker/DatePickerSkeleton.svelte

@@ -9,7 +9,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -17,18 +17,18 @@
   on:mouseleave
 >
   <div
-    class:bx--date-picker="{true}"
-    class:bx--skeleton="{true}"
-    class:bx--date-picker--range="{true}"
-    class:bx--date-picker--short="{!range}"
-    class:bx--date-picker--simple="{!range}"
+    class:bx--date-picker={true}
+    class:bx--skeleton={true}
+    class:bx--date-picker--range={true}
+    class:bx--date-picker--short={!range}
+    class:bx--date-picker--simple={!range}
   >
     {#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
-      <div class:bx--date-picker-container="{true}">
-        <label for="{id}" class:bx--label="{true}"></label>
+      <div class:bx--date-picker-container={true}>
+        <label for={id} class:bx--label={true}></label>
         <div
-          class:bx--date-picker__input="{true}"
-          class:bx--skeleton="{true}"
+          class:bx--date-picker__input={true}
+          class:bx--skeleton={true}
         ></div>
       </div>
     {/each}

src/Dropdown/Dropdown.svelte

@@ -171,32 +171,32 @@
   });
 </script>
 
-<svelte:window on:click="{pageClickHandler}" />
+<svelte:window on:click={pageClickHandler} />
 
 <div
-  class:bx--dropdown__wrapper="{true}"
-  class:bx--list-box__wrapper="{true}"
-  class:bx--dropdown__wrapper--inline="{inline}"
-  class:bx--list-box__wrapper--inline="{inline}"
-  class:bx--dropdown__wrapper--inline--invalid="{inline && invalid}"
+  class:bx--dropdown__wrapper={true}
+  class:bx--list-box__wrapper={true}
+  class:bx--dropdown__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline={inline}
+  class:bx--dropdown__wrapper--inline--invalid={inline && invalid}
   {...$$restProps}
 >
   {#if titleText}
     <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}"
-      class:bx--visually-hidden="{hideLabel}"
+      for={id}
+      class:bx--label={true}
+      class:bx--label--disabled={disabled}
+      class:bx--visually-hidden={hideLabel}
     >
       {titleText}
     </label>
   {/if}
   <ListBox
-    role="{undefined}"
-    type="{type}"
-    size="{size}"
-    name="{name}"
-    aria-label="{$$props['aria-label']}"
+    role={undefined}
+    {type}
+    {size}
+    {name}
+    aria-label={$$props["aria-label"]}
     class="bx--dropdown 
       {direction === 'top' && 'bx--list-box--up'} 
       {invalid && 'bx--dropdown--invalid'} 
@@ -207,17 +207,17 @@
       {inline && 'bx--dropdown--inline'}
       {disabled && 'bx--dropdown--disabled'}
       {light && 'bx--dropdown--light'}"
-    on:click="{({ target }) => {
+    on:click={({ target }) => {
       if (disabled) return;
       open = ref.contains(target) ? !open : false;
-    }}"
-    disabled="{disabled}"
-    open="{open}"
-    invalid="{invalid}"
-    invalidText="{invalidText}"
-    light="{light}"
-    warn="{warn}"
-    warnText="{warnText}"
+    }}
+    {disabled}
+    {open}
+    {invalid}
+    {invalidText}
+    {light}
+    {warn}
+    {warnText}
   >
     {#if invalid}
       <WarningFilled class="bx--list-box__invalid-icon" />
@@ -228,17 +228,17 @@
       />
     {/if}
     <button
-      bind:this="{ref}"
+      bind:this={ref}
       type="button"
-      class:bx--list-box__field="{true}"
+      class:bx--list-box__field={true}
       tabindex="0"
-      aria-expanded="{open}"
-      on:keydown="{(e) => {
+      aria-expanded={open}
+      on:keydown={(e) => {
         const { key } = e;
-        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(key)) {
+        if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {
           e.preventDefault();
         }
-        if (key === 'Enter') {
+        if (key === "Enter") {
           open = !open;
           if (
             highlightedIndex > -1 &&
@@ -248,22 +248,22 @@
             dispatchSelect();
             open = false;
           }
-        } else if (key === 'Tab') {
+        } else if (key === "Tab") {
           open = false;
           ref.blur();
-        } else if (key === 'ArrowDown') {
+        } else if (key === "ArrowDown") {
           if (!open) open = true;
           change(1);
-        } else if (key === 'ArrowUp') {
+        } else if (key === "ArrowUp") {
           if (!open) open = true;
           change(-1);
-        } else if (key === 'Escape') {
+        } else if (key === "Escape") {
           open = false;
         }
-      }}"
-      on:keyup="{(e) => {
+      }}
+      on:keyup={(e) => {
         const { key } = e;
-        if ([' '].includes(key)) {
+        if ([" "].includes(key)) {
           e.preventDefault();
         } else {
           return;
@@ -278,33 +278,33 @@
           dispatchSelect();
           open = false;
         }
-      }}"
-      disabled="{disabled}"
-      translateWithId="{translateWithId}"
-      id="{id}"
+      }}
+      {disabled}
+      {translateWithId}
+      {id}
     >
-      <span class:bx--list-box__label="{true}">
+      <span class:bx--list-box__label={true}>
         {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
       </span>
       <ListBoxMenuIcon
-        on:click="{(e) => {
+        on:click={(e) => {
           e.stopPropagation();
           if (disabled) return;
           open = !open;
-        }}"
-        translateWithId="{translateWithId}"
-        open="{open}"
+        }}
+        {translateWithId}
+        {open}
       />
     </button>
     {#if open}
-      <ListBoxMenu aria-labelledby="{id}" id="{id}">
+      <ListBoxMenu aria-labelledby={id} {id}>
         {#each items as item, i (item.id)}
           <ListBoxMenuItem
-            id="{item.id}"
-            active="{selectedId === item.id}"
-            highlighted="{highlightedIndex === i}"
-            disabled="{item.disabled}"
-            on:click="{(e) => {
+            id={item.id}
+            active={selectedId === item.id}
+            highlighted={highlightedIndex === i}
+            disabled={item.disabled}
+            on:click={(e) => {
               if (item.disabled) {
                 e.stopPropagation();
                 return;
@@ -312,13 +312,13 @@
               selectedId = item.id;
               dispatchSelect();
               ref.focus();
-            }}"
-            on:mouseenter="{() => {
+            }}
+            on:mouseenter={() => {
               if (item.disabled) return;
               highlightedIndex = i;
-            }}"
+            }}
           >
-            <slot item="{item}" index="{i}">
+            <slot {item} index={i}>
               {itemToString(item)}
             </slot>
           </ListBoxMenuItem>
@@ -328,8 +328,8 @@
   </ListBox>
   {#if !inline && !invalid && !warn && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
     >
       {helperText}
     </div>

src/Dropdown/DropdownSkeleton.svelte

@@ -6,18 +6,18 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--dropdown-v2="{true}"
-  class:bx--list-box="{true}"
-  class:bx--form-item="{true}"
-  class:bx--list-box--inline="{inline}"
+  class:bx--skeleton={true}
+  class:bx--dropdown-v2={true}
+  class:bx--list-box={true}
+  class:bx--form-item={true}
+  class:bx--list-box--inline={inline}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div role="button" class:bx--list-box__field="{true}">
-    <span class:bx--list-box__label="{true}"></span>
+  <div role="button" class:bx--list-box__field={true}>
+    <span class:bx--list-box__label={true}></span>
   </div>
 </div>

src/FileUploader/FileUploader.svelte

@@ -90,14 +90,16 @@
     if (addedIds.length > 0) {
       dispatch(
         "add",
-        addedIds.map((id) => files.find((file) => id === getFileId(file)))
+        addedIds.map((id) => files.find((file) => id === getFileId(file))),
       );
     }
 
     if (removedIds.length > 0) {
       dispatch(
         "remove",
-        removedIds.map((id) => prevFiles.find((file) => id === getFileId(file)))
+        removedIds.map((id) =>
+          prevFiles.find((file) => id === getFileId(file)),
+        ),
       );
     }
 
@@ -108,7 +110,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -117,8 +119,8 @@
 >
   {#if labelTitle || $$slots.labelTitle}
     <p
-      class:bx--file--label="{true}"
-      class:bx--label-description--disabled="{disabled}"
+      class:bx--file--label={true}
+      class:bx--label-description--disabled={disabled}
     >
       <slot name="labelTitle">
         {labelTitle}
@@ -127,8 +129,8 @@
   {/if}
   {#if labelDescription || $$slots.labelDescription}
     <p
-      class:bx--label-description="{true}"
-      class:bx--label-description--disabled="{disabled}"
+      class:bx--label-description={true}
+      class:bx--label-description--disabled={disabled}
     >
       <slot name="labelDescription">
         {labelDescription}
@@ -136,37 +138,37 @@
     </p>
   {/if}
   <FileUploaderButton
-    disabled="{disabled}"
+    {disabled}
     disableLabelChanges
-    labelText="{buttonLabel}"
-    accept="{accept}"
-    name="{name}"
-    multiple="{multiple}"
-    kind="{kind}"
-    size="{size}"
+    labelText={buttonLabel}
+    {accept}
+    {name}
+    {multiple}
+    {kind}
+    {size}
     on:change
-    on:change="{(e) => {
+    on:change={(e) => {
       files = e.detail;
-    }}"
+    }}
   />
-  <div class:bx--file-container="{true}">
+  <div class:bx--file-container={true}>
     {#each files as { name }, i}
-      <span class:bx--file__selected-file="{true}">
-        <p class:bx--file-filename="{true}">{name}</p>
-        <span class:bx--file__state-container="{true}">
+      <span class:bx--file__selected-file={true}>
+        <p class:bx--file-filename={true}>{name}</p>
+        <span class:bx--file__state-container={true}>
           <Filename
-            iconDescription="{iconDescription}"
-            status="{status}"
+            {iconDescription}
+            {status}
             on:keydown
-            on:keydown="{({ key }) => {
-              if (key === ' ' || key === 'Enter') {
+            on:keydown={({ key }) => {
+              if (key === " " || key === "Enter") {
                 files = files.filter((_, index) => index !== i);
               }
-            }}"
+            }}
             on:click
-            on:click="{() => {
+            on:click={() => {
               files = files.filter((_, index) => index !== i);
-            }}"
+            }}
           />
         </span>
       </span>

src/FileUploader/FileUploaderButton.svelte

@@ -69,57 +69,57 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
-  aria-disabled="{disabled}"
-  for="{id}"
-  tabindex="{disabled ? '-1' : tabindex}"
-  class:bx--btn="{true}"
-  class:bx--btn--disabled="{disabled}"
-  class:bx--btn--primary="{kind === 'primary'}"
-  class:bx--btn--secondary="{kind === 'secondary'}"
-  class:bx--btn--tertiary="{kind === 'tertiary'}"
-  class:bx--btn--ghost="{kind === 'ghost'}"
-  class:bx--btn--danger="{kind === 'danger'}"
-  class:bx--btn--danger-tertiary="{kind === 'danger-tertiary'}"
-  class:bx--btn--danger-ghost="{kind === 'danger-ghost'}"
-  class:bx--btn--sm="{size === 'small'}"
-  class:bx--btn--field="{size === 'field'}"
-  class:bx--btn--lg="{size === 'lg'}"
-  class:bx--btn--xl="{size === 'xl'}"
+  aria-disabled={disabled}
+  for={id}
+  tabindex={disabled ? "-1" : tabindex}
+  class:bx--btn={true}
+  class:bx--btn--disabled={disabled}
+  class:bx--btn--primary={kind === "primary"}
+  class:bx--btn--secondary={kind === "secondary"}
+  class:bx--btn--tertiary={kind === "tertiary"}
+  class:bx--btn--ghost={kind === "ghost"}
+  class:bx--btn--danger={kind === "danger"}
+  class:bx--btn--danger-tertiary={kind === "danger-tertiary"}
+  class:bx--btn--danger-ghost={kind === "danger-ghost"}
+  class:bx--btn--sm={size === "small"}
+  class:bx--btn--field={size === "field"}
+  class:bx--btn--lg={size === "lg"}
+  class:bx--btn--xl={size === "xl"}
   on:keydown
-  on:keydown="{({ key }) => {
-    if (key === ' ' || key === 'Enter') {
+  on:keydown={({ key }) => {
+    if (key === " " || key === "Enter") {
       ref.click();
     }
-  }}"
+  }}
 >
-  <span role="{role}">
+  <span {role}>
     <slot name="labelText">
       {labelText}
     </slot>
   </span>
 </label>
 <input
-  bind:this="{ref}"
+  bind:this={ref}
   type="file"
   tabindex="-1"
-  accept="{accept}"
-  disabled="{disabled}"
-  id="{id}"
-  multiple="{multiple}"
-  name="{name}"
-  class:bx--visually-hidden="{true}"
+  {accept}
+  {disabled}
+  {id}
+  {multiple}
+  {name}
+  class:bx--visually-hidden={true}
   {...$$restProps}
-  on:change|stopPropagation="{({ target }) => {
+  on:change|stopPropagation={({ target }) => {
     files = [...target.files];
 
     if (files && !disableLabelChanges) {
       labelText = files.length > 1 ? `${files.length} files` : files[0].name;
     }
 
-    dispatch('change', files);
-  }}"
+    dispatch("change", files);
+  }}
   on:click
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     target.value = null;
-  }}"
+  }}
 />

src/FileUploader/FileUploaderDropContainer.svelte

@@ -56,50 +56,50 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--file="{true}"
+  class:bx--file={true}
   {...$$restProps}
   on:dragover
-  on:dragover|preventDefault|stopPropagation="{({ dataTransfer }) => {
+  on:dragover|preventDefault|stopPropagation={({ dataTransfer }) => {
     if (!disabled) {
       over = true;
-      dataTransfer.dropEffect = 'copy';
+      dataTransfer.dropEffect = "copy";
     }
-  }}"
+  }}
   on:dragleave
-  on:dragleave|preventDefault|stopPropagation="{({ dataTransfer }) => {
+  on:dragleave|preventDefault|stopPropagation={({ dataTransfer }) => {
     if (!disabled) {
       over = false;
-      dataTransfer.dropEffect = 'move';
+      dataTransfer.dropEffect = "move";
     }
-  }}"
+  }}
   on:drop
-  on:drop|preventDefault|stopPropagation="{({ dataTransfer }) => {
+  on:drop|preventDefault|stopPropagation={({ dataTransfer }) => {
     if (!disabled) {
       over = false;
       files = validateFiles([...dataTransfer.files]);
-      dispatch('add', files);
-      dispatch('change', files);
+      dispatch("add", files);
+      dispatch("change", files);
     }
-  }}"
+  }}
 >
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <label
-    for="{id}"
-    tabindex="{tabindex}"
-    class:bx--file-browse-btn="{true}"
-    class:bx--file-browse-btn--disabled="{disabled}"
+    for={id}
+    {tabindex}
+    class:bx--file-browse-btn={true}
+    class:bx--file-browse-btn--disabled={disabled}
     on:keydown
-    on:keydown="{({ key }) => {
-      if (key === ' ' || key === 'Enter') {
+    on:keydown={({ key }) => {
+      if (key === " " || key === "Enter") {
         ref.click();
       }
-    }}"
+    }}
   >
     <div
-      role="{role}"
-      class:bx--file__drop-container="{true}"
-      class:bx--file__drop-container--drag-over="{over}"
+      {role}
+      class:bx--file__drop-container={true}
+      class:bx--file__drop-container--drag-over={over}
     >
       <slot name="labelText">
         {labelText}
@@ -107,23 +107,23 @@
     </div>
   </label>
   <input
-    bind:this="{ref}"
+    bind:this={ref}
     type="file"
     tabindex="-1"
-    id="{id}"
-    disabled="{disabled}"
-    accept="{accept}"
-    name="{name}"
-    multiple="{multiple}"
-    class:bx--file-input="{true}"
-    on:change="{({ target }) => {
+    {id}
+    {disabled}
+    {accept}
+    {name}
+    {multiple}
+    class:bx--file-input={true}
+    on:change={({ target }) => {
       files = validateFiles([...target.files]);
-      dispatch('add', files);
-      dispatch('change', files);
-    }}"
+      dispatch("add", files);
+      dispatch("change", files);
+    }}
     on:click
-    on:click="{({ target }) => {
+    on:click={({ target }) => {
       target.value = null;
-    }}"
+    }}
   />
 </div>

src/FileUploader/FileUploaderItem.svelte

@@ -42,37 +42,37 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <span
-  id="{id}"
-  class:bx--file__selected-file="{true}"
-  class:bx--file__selected-file--invalid="{invalid}"
-  class:bx--file__selected-file--md="{size === 'field'}"
-  class:bx--file__selected-file--sm="{size === 'small'}"
+  {id}
+  class:bx--file__selected-file={true}
+  class:bx--file__selected-file--invalid={invalid}
+  class:bx--file__selected-file--md={size === "field"}
+  class:bx--file__selected-file--sm={size === "small"}
   {...$$restProps}
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <p class:bx--file-filename="{true}">{name}</p>
-  <span class:bx--file__state-container="{true}">
+  <p class:bx--file-filename={true}>{name}</p>
+  <span class:bx--file__state-container={true}>
     <Filename
-      on:keydown="{({ key }) => {
-        if (key === ' ' || key === 'Enter') {
-          dispatch('delete', id);
+      on:keydown={({ key }) => {
+        if (key === " " || key === "Enter") {
+          dispatch("delete", id);
         }
-      }}"
-      on:click="{() => {
-        dispatch('delete', id);
-      }}"
-      iconDescription="{iconDescription}"
-      status="{status}"
-      invalid="{invalid}"
+      }}
+      on:click={() => {
+        dispatch("delete", id);
+      }}
+      {iconDescription}
+      {status}
+      {invalid}
     />
   </span>
   {#if invalid && errorSubject}
-    <div class:bx--form-requirement="{true}">
-      <div class:bx--form-requirement__title="{true}">{errorSubject}</div>
+    <div class:bx--form-requirement={true}>
+      <div class:bx--form-requirement__title={true}>{errorSubject}</div>
       {#if errorBody}
-        <p class:bx--form-requirement__supplement="{true}">{errorBody}</p>
+        <p class:bx--form-requirement__supplement={true}>{errorBody}</p>
       {/if}
     </div>
   {/if}

src/FileUploader/FileUploaderSkeleton.svelte

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

src/FileUploader/Filename.svelte

@@ -23,10 +23,10 @@
 
 {#if status === "uploading"}
   <Loading
-    description="{iconDescription}"
+    description={iconDescription}
     {...$$restProps}
     small
-    withOverlay="{false}"
+    withOverlay={false}
   />
 {/if}
 
@@ -35,8 +35,8 @@
     <WarningFilled class="bx--file-invalid" />
   {/if}
   <button
-    aria-label="{iconDescription}"
-    class:bx--file-close="{true}"
+    aria-label={iconDescription}
+    class:bx--file-close={true}
     type="button"
     tabindex="0"
     {...$$restProps}
@@ -49,8 +49,8 @@
 
 {#if status === "complete"}
   <CheckmarkFilled
-    aria-label="{iconDescription}"
-    title="{iconDescription}"
+    aria-label={iconDescription}
+    title={iconDescription}
     class="bx--file-complete"
     {...$$restProps}
   />

src/Form/Form.svelte

@@ -6,8 +6,8 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <form
-  class:bx--form="{true}"
-  bind:this="{ref}"
+  class:bx--form={true}
+  bind:this={ref}
   {...$$restProps}
   on:click
   on:keydown

src/FormGroup/FormGroup.svelte

@@ -21,10 +21,10 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <fieldset
-  data-invalid="{invalid || undefined}"
-  class:bx--fieldset="{true}"
-  class:bx--fieldset--no-margin="{noMargin}"
-  aria-labelledby="{$$restProps['aria-labelledby'] || legendId}"
+  data-invalid={invalid || undefined}
+  class:bx--fieldset={true}
+  class:bx--fieldset--no-margin={noMargin}
+  aria-labelledby={$$restProps["aria-labelledby"] || legendId}
   {...$$restProps}
   on:click
   on:mouseover
@@ -33,12 +33,12 @@
 >
   {#if legendText}
     <legend
-      class:bx--label="{true}"
-      id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend
+      class:bx--label={true}
+      id={legendId || $$restProps["aria-labelledby"]}>{legendText}</legend
     >
   {/if}
   <slot />
   {#if message}
-    <div class:bx--form__requirement="{true}">{messageText}</div>
+    <div class:bx--form__requirement={true}>{messageText}</div>
   {/if}
 </fieldset>

src/FormItem/FormItem.svelte

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

src/FormLabel/FormLabel.svelte

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

src/Grid/Column.svelte

@@ -111,7 +111,7 @@
 </script>
 
 {#if as}
-  <slot props="{props}" />
+  <slot {props} />
 {:else}
   <div {...props}>
     <slot />

src/Grid/Grid.svelte

@@ -50,7 +50,7 @@
 </script>
 
 {#if as}
-  <slot props="{props}" />
+  <slot {props} />
 {:else}
   <div {...props}>
     <slot />

src/Grid/Row.svelte

@@ -46,7 +46,7 @@
 </script>
 
 {#if as}
-  <slot props="{props}" />
+  <slot {props} />
 {:else}
   <div {...props}>
     <slot />

src/ImageLoader/ImageLoader.svelte

@@ -85,9 +85,9 @@
       <img
         style:width="100%"
         {...$$restProps}
-        src="{src}"
-        alt="{alt}"
-        transition:fade|local="{{ duration: fadeIn ? fast02 : 0 }}"
+        {src}
+        {alt}
+        transition:fade|local={{ duration: fadeIn ? fast02 : 0 }}
       />
     {/if}
   {/key}
@@ -95,7 +95,7 @@
     <slot name="error" />
   {/if}
 {:else}
-  <AspectRatio ratio="{ratio}">
+  <AspectRatio {ratio}>
     {#if loading}
       <slot name="loading" />
     {/if}
@@ -104,9 +104,9 @@
         <img
           style:width="100%"
           {...$$restProps}
-          src="{src}"
-          alt="{alt}"
-          transition:fade|local="{{ duration: fadeIn ? fast02 : 0 }}"
+          {src}
+          {alt}
+          transition:fade|local={{ duration: fadeIn ? fast02 : 0 }}
         />
       {/if}
     {/key}

src/InlineLoading/InlineLoading.svelte

@@ -48,7 +48,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--inline-loading="{true}"
+  class:bx--inline-loading={true}
   aria-live="assertive"
   {...$$restProps}
   on:click
@@ -56,27 +56,27 @@
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--inline-loading__animation="{true}">
+  <div class:bx--inline-loading__animation={true}>
     {#if status === "error"}
       <ErrorFilled
         class="bx--inline-loading--error"
-        title="{iconDescription || status}"
+        title={iconDescription || status}
       />
     {:else if status === "finished"}
       <CheckmarkFilled
         class="bx--inline-loading__checkmark-container"
-        title="{iconDescription || status}"
+        title={iconDescription || status}
       />
     {:else if status === "inactive" || status === "active"}
       <Loading
         small
-        description="{iconDescription}"
-        withOverlay="{false}"
-        active="{status === 'active'}"
+        description={iconDescription}
+        withOverlay={false}
+        active={status === "active"}
       />
     {/if}
   </div>
   {#if description}
-    <div class:bx--inline-loading__text="{true}">{description}</div>
+    <div class:bx--inline-loading__text={true}>{description}</div>
   {/if}
 </div>

src/Link/Link.svelte

@@ -38,13 +38,13 @@
 {#if disabled}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <a
-    bind:this="{ref}"
+    bind:this={ref}
     role="link"
     aria-disabled="true"
-    class:bx--link="{true}"
-    class:bx--link--disabled="{disabled}"
-    class:bx--link--inline="{inline}"
-    class:bx--link--visited="{visited}"
+    class:bx--link={true}
+    class:bx--link--disabled={disabled}
+    class:bx--link--inline={inline}
+    class:bx--link--visited={visited}
     {...$$restProps}
     on:click
     on:mouseover
@@ -53,24 +53,24 @@
   >
     <slot />
     {#if !inline && ($$slots.icon || icon)}
-      <div class:bx--link__icon="{true}">
+      <div class:bx--link__icon={true}>
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}
   </a>
 {:else}
   <a
-    bind:this="{ref}"
-    class:bx--link="{true}"
-    class:bx--link--disabled="{disabled}"
-    class:bx--link--inline="{inline}"
-    class:bx--link--visited="{visited}"
-    class:bx--link--sm="{size === 'sm'}"
-    class:bx--link--lg="{size === 'lg'}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    href="{href}"
+    bind:this={ref}
+    class:bx--link={true}
+    class:bx--link--disabled={disabled}
+    class:bx--link--inline={inline}
+    class:bx--link--visited={visited}
+    class:bx--link--sm={size === "sm"}
+    class:bx--link--lg={size === "lg"}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    {href}
     {...$$restProps}
     on:click
     on:mouseover
@@ -79,9 +79,9 @@
   >
     <slot />
     {#if !inline && ($$slots.icon || icon)}
-      <div class:bx--link__icon="{true}">
+      <div class:bx--link__icon={true}>
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}

src/Link/OutboundLink.svelte

@@ -12,7 +12,7 @@
   on:mouseenter
   on:mouseleave
   target="_blank"
-  icon="{Launch}"
+  icon={Launch}
 >
   <slot />
 </Link>

src/ListBox/ListBox.svelte

@@ -36,29 +36,29 @@
 <div
   role="listbox"
   tabindex="-1"
-  data-invalid="{invalid || undefined}"
-  class:bx--list-box="{true}"
-  class:bx--list-box--sm="{size === 'sm'}"
-  class:bx--list-box--xl="{size === 'xl'}"
-  class:bx--list-box--inline="{type === 'inline'}"
-  class:bx--list-box--disabled="{disabled}"
-  class:bx--list-box--expanded="{open}"
-  class:bx--list-box--light="{light}"
-  class:bx--list-box--warning="{!invalid && warn}"
+  data-invalid={invalid || undefined}
+  class:bx--list-box={true}
+  class:bx--list-box--sm={size === "sm"}
+  class:bx--list-box--xl={size === "xl"}
+  class:bx--list-box--inline={type === "inline"}
+  class:bx--list-box--disabled={disabled}
+  class:bx--list-box--expanded={open}
+  class:bx--list-box--light={light}
+  class:bx--list-box--warning={!invalid && warn}
   {...$$restProps}
   on:keydown
-  on:keydown="{(e) => {
-    if (e.key === 'Escape') {
+  on:keydown={(e) => {
+    if (e.key === "Escape") {
       e.stopPropagation();
     }
-  }}"
+  }}
   on:click|preventDefault
 >
   <slot />
 </div>
 {#if invalid}
-  <div class:bx--form-requirement="{true}">{invalidText}</div>
+  <div class:bx--form-requirement={true}>{invalidText}</div>
 {/if}
 {#if !invalid && warn}
-  <div class:bx--form-requirement="{true}">{warnText}</div>
+  <div class:bx--form-requirement={true}>{warnText}</div>
 {/if}

src/ListBox/ListBoxField.svelte

@@ -45,17 +45,15 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
-  bind:this="{ref}"
-  role="{role}"
-  aria-expanded="{ariaExpanded}"
-  aria-owns="{(ariaExpanded && menuId) || undefined}"
-  aria-controls="{(ariaExpanded && menuId) || undefined}"
-  aria-disabled="{disabled}"
-  aria-label="{ariaExpanded
-    ? translateWithId('close')
-    : translateWithId('open')}"
-  tabindex="{disabled ? '-1' : tabindex}"
-  class:bx--list-box__field="{true}"
+  bind:this={ref}
+  {role}
+  aria-expanded={ariaExpanded}
+  aria-owns={(ariaExpanded && menuId) || undefined}
+  aria-controls={(ariaExpanded && menuId) || undefined}
+  aria-disabled={disabled}
+  aria-label={ariaExpanded ? translateWithId("close") : translateWithId("open")}
+  tabindex={disabled ? "-1" : tabindex}
+  class:bx--list-box__field={true}
   {...$$restProps}
   on:click
   on:mouseover

src/ListBox/ListBoxMenu.svelte

@@ -7,10 +7,10 @@
 </script>
 
 <div
-  bind:this="{ref}"
+  bind:this={ref}
   role="listbox"
   id="menu-{id}"
-  class:bx--list-box__menu="{true}"
+  class:bx--list-box__menu={true}
   {...$$restProps}
   on:scroll
 >

src/ListBox/ListBoxMenuIcon.svelte

@@ -29,10 +29,10 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--list-box__menu-icon="{true}"
-  class:bx--list-box__menu-icon--open="{open}"
+  class:bx--list-box__menu-icon={true}
+  class:bx--list-box__menu-icon--open={open}
   {...$$restProps}
   on:click|preventDefault
 >
-  <ChevronDown aria-label="{description}" title="{description}" />
+  <ChevronDown aria-label={description} title={description} />
 </div>

src/ListBox/ListBoxMenuItem.svelte

@@ -21,21 +21,17 @@
 <div
   role="option"
   tabindex="-1"
-  class:bx--list-box__menu-item="{true}"
-  class:bx--list-box__menu-item--active="{active}"
-  class:bx--list-box__menu-item--highlighted="{highlighted || active}"
-  aria-selected="{active}"
-  disabled="{disabled ? true : undefined}"
+  class:bx--list-box__menu-item={true}
+  class:bx--list-box__menu-item--active={active}
+  class:bx--list-box__menu-item--highlighted={highlighted || active}
+  aria-selected={active}
+  disabled={disabled ? true : undefined}
   {...$$restProps}
   on:click
   on:mouseenter
   on:mouseleave
 >
-  <div
-    bind:this="{ref}"
-    title="{title}"
-    class:bx--list-box__menu-item__option="{true}"
-  >
+  <div bind:this={ref} {title} class:bx--list-box__menu-item__option={true}>
     <slot />
   </div>
 </div>

src/ListBox/ListBoxSelection.svelte

@@ -55,57 +55,57 @@
 
 {#if selectionCount !== undefined}
   <div
-    class:bx--tag="{true}"
-    class:bx--tag--filter="{true}"
-    class:bx--tag--high-contrast="{true}"
-    class:bx--tag--disabled="{disabled}"
+    class:bx--tag={true}
+    class:bx--tag--filter={true}
+    class:bx--tag--high-contrast={true}
+    class:bx--tag--disabled={disabled}
   >
-    <span class:bx--tag__label="{true}" title="{selectionCount}">
+    <span class:bx--tag__label={true} title={selectionCount}>
       {selectionCount}
     </span>
     <div
-      bind:this="{ref}"
+      bind:this={ref}
       role="button"
-      tabindex="{disabled ? -1 : 0}"
-      class:bx--tag__close-icon="{true}"
-      on:click|preventDefault|stopPropagation="{(e) => {
+      tabindex={disabled ? -1 : 0}
+      class:bx--tag__close-icon={true}
+      on:click|preventDefault|stopPropagation={(e) => {
         if (!disabled) {
-          dispatch('clear', e);
+          dispatch("clear", e);
         }
-      }}"
-      on:keydown|stopPropagation="{(e) => {
-        if (!disabled && e.key === 'Enter') {
-          dispatch('clear', e);
+      }}
+      on:keydown|stopPropagation={(e) => {
+        if (!disabled && e.key === "Enter") {
+          dispatch("clear", e);
         }
-      }}"
-      disabled="{disabled}"
-      aria-label="{translationIds.clearAll}"
-      title="{description}"
+      }}
+      {disabled}
+      aria-label={translationIds.clearAll}
+      title={description}
     >
       <Close />
     </div>
   </div>
 {:else}
   <div
-    bind:this="{ref}"
+    bind:this={ref}
     role="button"
-    aria-label="{description}"
-    title="{description}"
-    tabindex="{disabled ? '-1' : '0'}"
-    class:bx--list-box__selection="{true}"
-    class:bx--tag--filter="{selectionCount}"
-    class:bx--list-box__selection--multi="{selectionCount}"
+    aria-label={description}
+    title={description}
+    tabindex={disabled ? "-1" : "0"}
+    class:bx--list-box__selection={true}
+    class:bx--tag--filter={selectionCount}
+    class:bx--list-box__selection--multi={selectionCount}
     {...$$restProps}
-    on:click|preventDefault|stopPropagation="{(e) => {
+    on:click|preventDefault|stopPropagation={(e) => {
       if (!disabled) {
-        dispatch('clear', e);
+        dispatch("clear", e);
       }
-    }}"
-    on:keydown|stopPropagation="{(e) => {
-      if (!disabled && e.key === 'Enter') {
-        dispatch('clear', e);
+    }}
+    on:keydown|stopPropagation={(e) => {
+      if (!disabled && e.key === "Enter") {
+        dispatch("clear", e);
       }
-    }}"
+    }}
   >
     {#if selectionCount !== undefined}{selectionCount}{/if}
     <Close />

src/ListItem/ListItem.svelte

@@ -1,7 +1,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
-  class:bx--list__item="{true}"
+  class:bx--list__item={true}
   {...$$restProps}
   on:click
   on:mouseover

src/Loading/Loading.svelte

@@ -16,57 +16,61 @@
 
 {#if withOverlay}
   <div
-    class:bx--loading-overlay="{true}"
-    class:bx--loading-overlay--stop="{!active}"
+    class:bx--loading-overlay={true}
+    class:bx--loading-overlay--stop={!active}
     {...$$restProps}
   >
     <div
       aria-atomic="true"
-      aria-live="{active ? 'assertive' : 'off'}"
-      class:bx--loading="{true}"
-      class:bx--loading--small="{small}"
-      class:bx--loading--stop="{!active}"
+      aria-live={active ? "assertive" : "off"}
+      class:bx--loading={true}
+      class:bx--loading--small={small}
+      class:bx--loading--stop={!active}
     >
-      <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
+      <svg class:bx--loading__svg={true} viewBox="0 0 100 100">
         <title>{description}</title>
         {#if small}
           <circle
-            class:bx--loading__background="{true}"
+            class:bx--loading__background={true}
             cx="50%"
             cy="50%"
-            r="{spinnerRadius}"></circle>
+            r={spinnerRadius}
+          ></circle>
         {/if}
         <circle
-          class:bx--loading__stroke="{true}"
+          class:bx--loading__stroke={true}
           cx="50%"
           cy="50%"
-          r="{spinnerRadius}"></circle>
+          r={spinnerRadius}
+        ></circle>
       </svg>
     </div>
   </div>
 {:else}
   <div
     aria-atomic="true"
-    aria-live="{active ? 'assertive' : 'off'}"
-    class:bx--loading="{true}"
-    class:bx--loading--small="{small}"
-    class:bx--loading--stop="{!active}"
+    aria-live={active ? "assertive" : "off"}
+    class:bx--loading={true}
+    class:bx--loading--small={small}
+    class:bx--loading--stop={!active}
     {...$$restProps}
   >
-    <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
+    <svg class:bx--loading__svg={true} viewBox="0 0 100 100">
       <title>{description}</title>
       {#if small}
         <circle
-          class:bx--loading__background="{true}"
+          class:bx--loading__background={true}
           cx="50%"
           cy="50%"
-          r="{spinnerRadius}"></circle>
+          r={spinnerRadius}
+        ></circle>
       {/if}
       <circle
-        class:bx--loading__stroke="{true}"
+        class:bx--loading__stroke={true}
         cx="50%"
         cy="50%"
-        r="{spinnerRadius}"></circle>
+        r={spinnerRadius}
+      ></circle>
     </svg>
   </div>
 {/if}

src/Modal/Modal.svelte

@@ -134,20 +134,20 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  bind:this="{ref}"
+  bind:this={ref}
   role="presentation"
-  id="{id}"
-  class:bx--modal="{true}"
-  class:bx--modal-tall="{!passiveModal}"
-  class:is-visible="{open}"
-  class:bx--modal--danger="{danger}"
+  {id}
+  class:bx--modal={true}
+  class:bx--modal-tall={!passiveModal}
+  class:is-visible={open}
+  class:bx--modal--danger={danger}
   {...$$restProps}
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (open) {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         open = false;
-      } else if (e.key === 'Tab') {
+      } else if (e.key === "Tab") {
         // trap focus
 
         // taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
@@ -170,107 +170,107 @@
         e.preventDefault();
       } else if (
         shouldSubmitOnEnter &&
-        e.key === 'Enter' &&
+        e.key === "Enter" &&
         !primaryButtonDisabled
       ) {
-        dispatch('submit');
-        dispatch('click:button--primary');
+        dispatch("submit");
+        dispatch("click:button--primary");
       }
     }
-  }}"
+  }}
   on:click
-  on:click="{() => {
+  on:click={() => {
     if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
     didClickInnerModal = false;
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:transitionend="{(e) => {
-    if (e.propertyName === 'transform') {
-      dispatch('transitionend', { open });
+  on:transitionend={(e) => {
+    if (e.propertyName === "transform") {
+      dispatch("transitionend", { open });
     }
-  }}"
+  }}
 >
   <div
-    bind:this="{innerModal}"
+    bind:this={innerModal}
     tabindex="-1"
-    role="{alert ? (passiveModal ? 'alert' : 'alertdialog') : 'dialog'}"
-    aria-describedby="{alert && !passiveModal ? modalBodyId : undefined}"
+    role={alert ? (passiveModal ? "alert" : "alertdialog") : "dialog"}
+    aria-describedby={alert && !passiveModal ? modalBodyId : undefined}
     aria-modal="true"
-    aria-label="{ariaLabel}"
-    class:bx--modal-container="{true}"
-    class:bx--modal-container--xs="{size === 'xs'}"
-    class:bx--modal-container--sm="{size === 'sm'}"
-    class:bx--modal-container--lg="{size === 'lg'}"
-    on:click="{() => {
+    aria-label={ariaLabel}
+    class:bx--modal-container={true}
+    class:bx--modal-container--xs={size === "xs"}
+    class:bx--modal-container--sm={size === "sm"}
+    class:bx--modal-container--lg={size === "lg"}
+    on:click={() => {
       didClickInnerModal = true;
-    }}"
+    }}
   >
-    <div class:bx--modal-header="{true}">
+    <div class:bx--modal-header={true}>
       {#if passiveModal}
         <button
-          bind:this="{buttonRef}"
+          bind:this={buttonRef}
           type="button"
-          aria-label="{iconDescription}"
-          class:bx--modal-close="{true}"
-          on:click="{() => {
+          aria-label={iconDescription}
+          class:bx--modal-close={true}
+          on:click={() => {
             open = false;
-          }}"
+          }}
         >
-          <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
+          <Close size={20} class="bx--modal-close__icon" aria-hidden="true" />
         </button>
       {/if}
       {#if modalLabel}
-        <h2 id="{modalLabelId}" class:bx--modal-header__label="{true}">
+        <h2 id={modalLabelId} class:bx--modal-header__label={true}>
           <slot name="label">{modalLabel}</slot>
         </h2>
       {/if}
-      <h3 id="{modalHeadingId}" class:bx--modal-header__heading="{true}">
+      <h3 id={modalHeadingId} class:bx--modal-header__heading={true}>
         <slot name="heading">{modalHeading}</slot>
       </h3>
       {#if !passiveModal}
         <button
-          bind:this="{buttonRef}"
+          bind:this={buttonRef}
           type="button"
-          aria-label="{iconDescription}"
-          class:bx--modal-close="{true}"
-          on:click="{() => {
+          aria-label={iconDescription}
+          class:bx--modal-close={true}
+          on:click={() => {
             open = false;
-          }}"
+          }}
         >
-          <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
+          <Close size={20} class="bx--modal-close__icon" aria-hidden="true" />
         </button>
       {/if}
     </div>
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <div
-      id="{modalBodyId}"
-      class:bx--modal-content="{true}"
-      class:bx--modal-content--with-form="{hasForm}"
-      class:bx--modal-scroll-content="{hasScrollingContent}"
-      tabindex="{hasScrollingContent ? '0' : undefined}"
-      role="{hasScrollingContent ? 'region' : undefined}"
-      aria-label="{hasScrollingContent ? ariaLabel : undefined}"
-      aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}"
+      id={modalBodyId}
+      class:bx--modal-content={true}
+      class:bx--modal-content--with-form={hasForm}
+      class:bx--modal-scroll-content={hasScrollingContent}
+      tabindex={hasScrollingContent ? "0" : undefined}
+      role={hasScrollingContent ? "region" : undefined}
+      aria-label={hasScrollingContent ? ariaLabel : undefined}
+      aria-labelledby={modalLabel ? modalLabelId : modalHeadingId}
     >
       <slot />
     </div>
     {#if hasScrollingContent}
-      <div class:bx--modal-content--overflow-indicator="{true}"></div>
+      <div class:bx--modal-content--overflow-indicator={true}></div>
     {/if}
     {#if !passiveModal}
       <div
-        class:bx--modal-footer="{true}"
-        class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
+        class:bx--modal-footer={true}
+        class:bx--modal-footer--three-button={secondaryButtons.length === 2}
       >
         {#if secondaryButtons.length > 0}
           {#each secondaryButtons as button}
             <Button
               kind="secondary"
-              on:click="{() => {
-                dispatch('click:button--secondary', { text: button.text });
-              }}"
+              on:click={() => {
+                dispatch("click:button--secondary", { text: button.text });
+              }}
             >
               {button.text}
             </Button>
@@ -278,23 +278,23 @@
         {:else if secondaryButtonText}
           <Button
             kind="secondary"
-            on:click="{() => {
-              dispatch('click:button--secondary', {
+            on:click={() => {
+              dispatch("click:button--secondary", {
                 text: secondaryButtonText,
               });
-            }}"
+            }}
           >
             {secondaryButtonText}
           </Button>
         {/if}
         <Button
-          kind="{danger ? 'danger' : 'primary'}"
-          disabled="{primaryButtonDisabled}"
-          icon="{primaryButtonIcon}"
-          on:click="{() => {
-            dispatch('submit');
-            dispatch('click:button--primary');
-          }}"
+          kind={danger ? "danger" : "primary"}
+          disabled={primaryButtonDisabled}
+          icon={primaryButtonIcon}
+          on:click={() => {
+            dispatch("submit");
+            dispatch("click:button--primary");
+          }}
         >
           {primaryButtonText}
         </Button>

src/MultiSelect/MultiSelect.svelte

@@ -275,32 +275,33 @@
   $: filteredItems = sortedItems.filter((item) => filterItem(item, value));
   $: highlightedId =
     highlightedIndex > -1
-      ? (filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ?? null
+      ? ((filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ??
+        null)
       : null;
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (open && multiSelectRef && !multiSelectRef.contains(target)) {
       open = false;
     }
-  }}"
+  }}
 />
 
 <div
-  bind:this="{multiSelectRef}"
-  class:bx--multi-select__wrapper="{true}"
-  class:bx--list-box__wrapper="{true}"
-  class:bx--multi-select__wrapper--inline="{inline}"
-  class:bx--list-box__wrapper--inline="{inline}"
-  class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
+  bind:this={multiSelectRef}
+  class:bx--multi-select__wrapper={true}
+  class:bx--list-box__wrapper={true}
+  class:bx--multi-select__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline={inline}
+  class:bx--multi-select__wrapper--inline--invalid={inline && invalid}
 >
   {#if titleText || $$slots.titleText}
     <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}"
-      class:bx--visually-hidden="{hideLabel}"
+      for={id}
+      class:bx--label={true}
+      class:bx--label--disabled={disabled}
+      class:bx--visually-hidden={hideLabel}
     >
       <slot name="titleText">
         {titleText}
@@ -308,15 +309,15 @@
     </label>
   {/if}
   <ListBox
-    role="{undefined}"
-    disabled="{disabled}"
-    invalid="{invalid}"
-    invalidText="{invalidText}"
-    open="{open}"
-    light="{light}"
-    size="{size}"
-    warn="{warn}"
-    warnText="{warnText}"
+    role={undefined}
+    {disabled}
+    {invalid}
+    {invalidText}
+    {open}
+    {light}
+    {size}
+    {warn}
+    {warnText}
     class="bx--multi-select {direction === 'top' &&
       'bx--list-box--up'} {filterable && 'bx--combo-box'}
       {filterable && 'bx--multi-select--filterable'}
@@ -335,8 +336,8 @@
     <ListBoxField
       role="button"
       tabindex="0"
-      aria-expanded="{open}"
-      on:click="{() => {
+      aria-expanded={open}
+      on:click={() => {
         if (disabled) return;
         if (filterable) {
           open = true;
@@ -344,191 +345,187 @@
         } else {
           open = !open;
         }
-      }}"
-      on:keydown="{(e) => {
+      }}
+      on:keydown={(e) => {
         if (filterable) {
           return;
         }
         const key = e.key;
-        if ([' ', 'ArrowUp', 'ArrowDown'].includes(key)) {
+        if ([" ", "ArrowUp", "ArrowDown"].includes(key)) {
           e.preventDefault();
         }
-        if (key === ' ') {
+        if (key === " ") {
           open = !open;
-        } else if (key === 'Tab') {
+        } else if (key === "Tab") {
           if (selectionRef && checked.length > 0) {
             selectionRef.focus();
           } else {
             open = false;
             fieldRef.blur();
           }
-        } else if (key === 'ArrowDown') {
+        } else if (key === "ArrowDown") {
           change(1);
-        } else if (key === 'ArrowUp') {
+        } else if (key === "ArrowUp") {
           change(-1);
-        } else if (key === 'Enter') {
+        } else if (key === "Enter") {
           if (highlightedIndex > -1) {
             sortedItems = sortedItems.map((item, i) => {
               if (i !== highlightedIndex) return item;
               return { ...item, checked: !item.checked };
             });
           }
-        } else if (key === 'Escape') {
+        } else if (key === "Escape") {
           open = false;
         }
-      }}"
-      on:focus="{() => {
+      }}
+      on:focus={() => {
         if (filterable) {
           open = true;
           if (inputRef) inputRef.focus();
         }
-      }}"
-      on:blur="{(e) => {
-        if (!filterable) dispatch('blur', e);
-      }}"
-      id="{id}"
-      disabled="{disabled}"
-      translateWithId="{translateWithId}"
+      }}
+      on:blur={(e) => {
+        if (!filterable) dispatch("blur", e);
+      }}
+      {id}
+      {disabled}
+      {translateWithId}
     >
       {#if checked.length > 0}
         <ListBoxSelection
-          selectionCount="{checked.length}"
+          selectionCount={checked.length}
           on:clear
-          on:clear="{() => {
+          on:clear={() => {
             selectedIds = [];
             sortedItems = sortedItems.map((item) => ({
               ...item,
               checked: false,
             }));
             if (fieldRef) fieldRef.blur();
-          }}"
-          translateWithId="{translateWithIdSelection}"
-          disabled="{disabled}"
+          }}
+          translateWithId={translateWithIdSelection}
+          {disabled}
         />
       {/if}
       {#if filterable}
         <input
-          bind:this="{inputRef}"
+          bind:this={inputRef}
           bind:value
           {...$$restProps}
           role="combobox"
           tabindex="0"
           autocomplete="off"
           aria-autocomplete="list"
-          aria-expanded="{open}"
-          aria-activedescendant="{highlightedId}"
-          aria-disabled="{disabled}"
-          aria-controls="{menuId}"
-          class:bx--text-input="{true}"
-          class:bx--text-input--empty="{value === ''}"
-          class:bx--text-input--light="{light}"
+          aria-expanded={open}
+          aria-activedescendant={highlightedId}
+          aria-disabled={disabled}
+          aria-controls={menuId}
+          class:bx--text-input={true}
+          class:bx--text-input--empty={value === ""}
+          class:bx--text-input--light={light}
           on:keydown
-          on:keydown|stopPropagation="{({ key }) => {
-            if (key === 'Enter') {
+          on:keydown|stopPropagation={({ key }) => {
+            if (key === "Enter") {
               if (highlightedId) {
                 const filteredItemIndex = sortedItems.findIndex(
-                  (item) => item.id === highlightedId
+                  (item) => item.id === highlightedId,
                 );
                 sortedItems = sortedItems.map((item, i) => {
                   if (i !== filteredItemIndex) return item;
                   return { ...item, checked: !item.checked };
                 });
               }
-            } else if (key === 'Tab') {
+            } else if (key === "Tab") {
               open = false;
               inputRef.blur();
-            } else if (key === 'ArrowDown') {
+            } else if (key === "ArrowDown") {
               change(1);
-            } else if (key === 'ArrowUp') {
+            } else if (key === "ArrowUp") {
               change(-1);
-            } else if (key === 'Escape') {
+            } else if (key === "Escape") {
               open = false;
-            } else if (key === ' ') {
+            } else if (key === " ") {
               if (!open) open = true;
             }
-          }}"
+          }}
           on:keyup
           on:focus
           on:blur
           on:paste
-          disabled="{disabled}"
-          placeholder="{placeholder}"
-          id="{id}"
-          name="{name}"
+          {disabled}
+          {placeholder}
+          {id}
+          {name}
         />
         {#if invalid}
           <WarningFilled class="bx--list-box__invalid-icon" />
         {/if}
         {#if value}
           <ListBoxSelection
-            on:clear="{() => {
-              value = '';
+            on:clear={() => {
+              value = "";
               open = false;
-            }}"
-            translateWithId="{translateWithIdSelection}"
-            disabled="{disabled}"
-            open="{open}"
+            }}
+            translateWithId={translateWithIdSelection}
+            {disabled}
+            {open}
           />
         {/if}
         <ListBoxMenuIcon
           style="pointer-events: {open ? 'auto' : 'none'}"
-          on:click="{(e) => {
+          on:click={(e) => {
             e.stopPropagation();
             open = !open;
-          }}"
-          translateWithId="{translateWithId}"
-          open="{open}"
+          }}
+          {translateWithId}
+          {open}
         />
       {/if}
       {#if !filterable}
-        <span class:bx--list-box__label="{true}">{label}</span>
-        <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
+        <span class:bx--list-box__label={true}>{label}</span>
+        <ListBoxMenuIcon {open} {translateWithId} />
       {/if}
     </ListBoxField>
-    <div style:display="{open ? "block" : "none"}">
-      <ListBoxMenu
-        aria-label="{ariaLabel}"
-        id="{id}"
-        aria-multiselectable="true"
-      >
+    <div style:display={open ? "block" : "none"}>
+      <ListBoxMenu aria-label={ariaLabel} {id} aria-multiselectable="true">
         {#each filterable ? filteredItems : sortedItems as item, i (item.id)}
           <ListBoxMenuItem
-            id="{item.id}"
+            id={item.id}
             role="option"
             aria-labelledby="checkbox-{item.id}"
-            aria-selected="{item.checked}"
-            active="{item.checked}"
-            highlighted="{highlightedIndex === i}"
-            disabled="{item.disabled}"
-            on:click="{(e) => {
+            aria-selected={item.checked}
+            active={item.checked}
+            highlighted={highlightedIndex === i}
+            disabled={item.disabled}
+            on:click={(e) => {
               if (item.disabled) {
                 e.stopPropagation();
                 return;
               }
               sortedItems = sortedItems.map((_) =>
-                _.id === item.id ? { ..._, checked: !_.checked } : _
+                _.id === item.id ? { ..._, checked: !_.checked } : _,
               );
               fieldRef.focus();
-            }}"
-            on:mouseenter="{() => {
+            }}
+            on:mouseenter={() => {
               if (item.disabled) return;
               highlightedIndex = i;
-            }}"
+            }}
           >
             <Checkbox
-              name="{item.id}"
-              title="{useTitleInItem ? itemToString(item) : undefined}"
+              name={item.id}
+              title={useTitleInItem ? itemToString(item) : undefined}
               {...itemToInput(item)}
               readonly
               tabindex="-1"
               id="checkbox-{item.id}"
-              checked="{item.checked}"
-              disabled="{item.disabled}"
-              on:blur="{() => {
+              checked={item.checked}
+              disabled={item.disabled}
+              on:blur={() => {
                 if (i === filteredItems.length - 1) open = false;
-              }}"
+              }}
             >
-              <slot slot="labelText" item="{item}" index="{i}">
+              <slot slot="labelText" {item} index={i}>
                 {itemToString(item)}
               </slot>
             </Checkbox>
@@ -539,8 +536,8 @@
   </ListBox>
   {#if !inline && !invalid && !warn && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
     >
       {helperText}
     </div>

src/Notification/InlineNotification.svelte

@@ -49,7 +49,7 @@
     const shouldContinue = dispatch(
       "close",
       { timeout: closeFromTimeout === true },
-      { cancelable: true }
+      { cancelable: true },
     );
     if (shouldContinue) {
       open = false;
@@ -70,34 +70,34 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if open}
   <div
-    role="{role}"
-    kind="{kind}"
-    class:bx--inline-notification="{true}"
-    class:bx--inline-notification--low-contrast="{lowContrast}"
-    class:bx--inline-notification--hide-close-button="{hideCloseButton}"
-    class:bx--inline-notification--error="{kind === 'error'}"
-    class:bx--inline-notification--info="{kind === 'info'}"
-    class:bx--inline-notification--info-square="{kind === 'info-square'}"
-    class:bx--inline-notification--success="{kind === 'success'}"
-    class:bx--inline-notification--warning="{kind === 'warning'}"
-    class:bx--inline-notification--warning-alt="{kind === 'warning-alt'}"
+    {role}
+    {kind}
+    class:bx--inline-notification={true}
+    class:bx--inline-notification--low-contrast={lowContrast}
+    class:bx--inline-notification--hide-close-button={hideCloseButton}
+    class:bx--inline-notification--error={kind === "error"}
+    class:bx--inline-notification--info={kind === "info"}
+    class:bx--inline-notification--info-square={kind === "info-square"}
+    class:bx--inline-notification--success={kind === "success"}
+    class:bx--inline-notification--warning={kind === "warning"}
+    class:bx--inline-notification--warning-alt={kind === "warning-alt"}
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
   >
-    <div class:bx--inline-notification__details="{true}">
+    <div class:bx--inline-notification__details={true}>
       <NotificationIcon
         notificationType="inline"
-        kind="{kind}"
-        iconDescription="{statusIconDescription}"
+        {kind}
+        iconDescription={statusIconDescription}
       />
-      <div class:bx--inline-notification__text-wrapper="{true}">
-        <p class:bx--inline-notification__title="{true}">
+      <div class:bx--inline-notification__text-wrapper={true}>
+        <p class:bx--inline-notification__title={true}>
           <slot name="title">{title}</slot>
         </p>
-        <div class:bx--inline-notification__subtitle="{true}">
+        <div class:bx--inline-notification__subtitle={true}>
           <slot name="subtitle">{subtitle}</slot>
         </div>
         <slot />
@@ -106,9 +106,9 @@
     <slot name="actions" />
     {#if !hideCloseButton}
       <NotificationButton
-        iconDescription="{closeButtonDescription}"
+        iconDescription={closeButtonDescription}
         notificationType="inline"
-        on:click="{close}"
+        on:click={close}
       />
     {/if}
   </div>

src/Notification/NotificationButton.svelte

@@ -26,10 +26,10 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
   type="button"
-  aria-label="{iconDescription}"
-  title="{iconDescription}"
-  class:bx--toast-notification__close-button="{notificationType === 'toast'}"
-  class:bx--inline-notification__close-button="{notificationType === 'inline'}"
+  aria-label={iconDescription}
+  title={iconDescription}
+  class:bx--toast-notification__close-button={notificationType === "toast"}
+  class:bx--inline-notification__close-button={notificationType === "inline"}
   {...$$restProps}
   on:click
   on:mouseover
@@ -37,9 +37,9 @@
   on:mouseleave
 >
   <svelte:component
-    this="{icon}"
-    size="{20}"
-    title="{title}"
+    this={icon}
+    size={20}
+    {title}
     class="{notificationType === 'toast' &&
       'bx--toast-notification__close-icon'} {notificationType === 'inline' &&
       'bx--inline-notification__close-icon'}"

src/Notification/NotificationIcon.svelte

@@ -32,9 +32,9 @@
 </script>
 
 <svelte:component
-  this="{icons[kind]}"
-  size="{20}"
-  title="{iconDescription}"
+  this={icons[kind]}
+  size={20}
+  title={iconDescription}
   class="{notificationType === 'toast' &&
     'bx--toast-notification__icon'} {notificationType === 'inline' &&
     'bx--inline-notification__icon'}"

src/Notification/ToastNotification.svelte

@@ -61,7 +61,7 @@
     const shouldContinue = dispatch(
       "close",
       { timeout: closeFromTimeout === true },
-      { cancelable: true }
+      { cancelable: true },
     );
     if (shouldContinue) {
       open = false;
@@ -92,40 +92,40 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if open}
   <div
-    role="{role}"
-    kind="{kind}"
-    class:bx--toast-notification="{true}"
-    class:bx--toast-notification--low-contrast="{lowContrast}"
-    class:bx--toast-notification--error="{kind === 'error'}"
-    class:bx--toast-notification--info="{kind === 'info'}"
-    class:bx--toast-notification--info-square="{kind === 'info-square'}"
-    class:bx--toast-notification--success="{kind === 'success'}"
-    class:bx--toast-notification--warning="{kind === 'warning'}"
-    class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}"
-    style:width="{fullWidth ? "100%" : undefined}"
+    {role}
+    {kind}
+    class:bx--toast-notification={true}
+    class:bx--toast-notification--low-contrast={lowContrast}
+    class:bx--toast-notification--error={kind === "error"}
+    class:bx--toast-notification--info={kind === "info"}
+    class:bx--toast-notification--info-square={kind === "info-square"}
+    class:bx--toast-notification--success={kind === "success"}
+    class:bx--toast-notification--warning={kind === "warning"}
+    class:bx--toast-notification--warning-alt={kind === "warning-alt"}
+    style:width={fullWidth ? "100%" : undefined}
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
   >
-    <NotificationIcon kind="{kind}" iconDescription="{statusIconDescription}" />
-    <div class:bx--toast-notification__details="{true}">
-      <h3 class:bx--toast-notification__title="{true}">
+    <NotificationIcon {kind} iconDescription={statusIconDescription} />
+    <div class:bx--toast-notification__details={true}>
+      <h3 class:bx--toast-notification__title={true}>
         <slot name="title">{title}</slot>
       </h3>
-      <div class:bx--toast-notification__subtitle="{true}">
+      <div class:bx--toast-notification__subtitle={true}>
         <slot name="subtitle">{subtitle}</slot>
       </div>
-      <div class:bx--toast-notification__caption="{true}">
+      <div class:bx--toast-notification__caption={true}>
         <slot name="caption">{caption}</slot>
       </div>
       <slot />
     </div>
     {#if !hideCloseButton}
       <NotificationButton
-        iconDescription="{closeButtonDescription}"
-        on:click="{close}"
+        iconDescription={closeButtonDescription}
+        on:click={close}
       />
     {/if}
   </div>

src/NumberInput/NumberInput.svelte

@@ -156,56 +156,56 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
   <div
-    data-invalid="{error || undefined}"
-    class:bx--number="{true}"
-    class:bx--number--helpertext="{true}"
-    class:bx--number--readonly="{readonly}"
-    class:bx--number--light="{light}"
-    class:bx--number--nolabel="{hideLabel}"
-    class:bx--number--nosteppers="{hideSteppers}"
-    class:bx--number--sm="{size === 'sm'}"
-    class:bx--number--xl="{size === 'xl'}"
+    data-invalid={error || undefined}
+    class:bx--number={true}
+    class:bx--number--helpertext={true}
+    class:bx--number--readonly={readonly}
+    class:bx--number--light={light}
+    class:bx--number--nolabel={hideLabel}
+    class:bx--number--nosteppers={hideSteppers}
+    class:bx--number--sm={size === "sm"}
+    class:bx--number--xl={size === "xl"}
   >
     {#if $$slots.label || label}
       <label
-        for="{id}"
-        class:bx--label="{true}"
-        class:bx--label--disabled="{disabled}"
-        class:bx--visually-hidden="{hideLabel}"
+        for={id}
+        class:bx--label={true}
+        class:bx--label--disabled={disabled}
+        class:bx--visually-hidden={hideLabel}
       >
         <slot name="label">{label}</slot>
       </label>
     {/if}
     <div
-      class:bx--number__input-wrapper="{true}"
-      class:bx--number__input-wrapper--warning="{!invalid && warn}"
+      class:bx--number__input-wrapper={true}
+      class:bx--number__input-wrapper--warning={!invalid && warn}
     >
       <input
-        bind:this="{ref}"
+        bind:this={ref}
         type="number"
         pattern="[0-9]*"
-        aria-describedby="{errorId}"
-        data-invalid="{error || undefined}"
-        aria-invalid="{error || undefined}"
-        aria-label="{label ? undefined : ariaLabel}"
-        disabled="{disabled}"
-        id="{id}"
-        name="{name}"
-        max="{max}"
-        min="{min}"
-        step="{step}"
-        value="{value ?? ''}"
-        readonly="{readonly}"
+        aria-describedby={errorId}
+        data-invalid={error || undefined}
+        aria-invalid={error || undefined}
+        aria-label={label ? undefined : ariaLabel}
+        {disabled}
+        {id}
+        {name}
+        {max}
+        {min}
+        {step}
+        value={value ?? ""}
+        {readonly}
         {...$$restProps}
-        on:change="{onChange}"
-        on:input="{onInput}"
+        on:change={onChange}
+        on:input={onInput}
         on:keydown
         on:keyup
         on:focus
@@ -225,55 +225,55 @@
         {/if}
       {/if}
       {#if !hideSteppers}
-        <div class:bx--number__controls="{true}">
+        <div class:bx--number__controls={true}>
           <button
             type="button"
             tabindex="-1"
-            title="{decrementLabel || iconDescription}"
-            aria-label="{decrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
-            class:down-icon="{true}"
-            on:click="{() => {
+            title={decrementLabel || iconDescription}
+            aria-label={decrementLabel || iconDescription}
+            class:bx--number__control-btn={true}
+            class:down-icon={true}
+            on:click={() => {
               updateValue(false);
-            }}"
-            disabled="{disabled}"
+            }}
+            {disabled}
           >
             <Subtract class="down-icon" />
           </button>
-          <div class:bx--number__rule-divider="{true}"></div>
+          <div class:bx--number__rule-divider={true}></div>
           <button
             type="button"
             tabindex="-1"
-            title="{incrementLabel || iconDescription}"
-            aria-label="{incrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
-            class:up-icon="{true}"
-            on:click="{() => {
+            title={incrementLabel || iconDescription}
+            aria-label={incrementLabel || iconDescription}
+            class:bx--number__control-btn={true}
+            class:up-icon={true}
+            on:click={() => {
               updateValue(true);
-            }}"
-            disabled="{disabled}"
+            }}
+            {disabled}
           >
             <Add class="up-icon" />
           </button>
-          <div class:bx--number__rule-divider="{true}"></div>
+          <div class:bx--number__rule-divider={true}></div>
         </div>
       {/if}
     </div>
     {#if !error && !warn && helperText}
       <div
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
       >
         {helperText}
       </div>
     {/if}
     {#if error}
-      <div id="{errorId}" class:bx--form-requirement="{true}">
+      <div id={errorId} class:bx--form-requirement={true}>
         {invalidText}
       </div>
     {/if}
     {#if !error && warn}
-      <div id="{errorId}" class:bx--form-requirement="{true}">{warnText}</div>
+      <div id={errorId} class:bx--form-requirement={true}>{warnText}</div>
     {/if}
   </div>
 </div>

src/NumberInput/NumberInputSkeleton.svelte

@@ -6,7 +6,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -14,7 +14,7 @@
   on:mouseleave
 >
   {#if !hideLabel}
-    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+    <span class:bx--label={true} class:bx--skeleton={true}></span>
   {/if}
-  <div class:bx--number="{true}" class:bx--skeleton="{true}"></div>
+  <div class:bx--number={true} class:bx--skeleton={true}></div>
 </div>

src/OrderedList/OrderedList.svelte

@@ -12,10 +12,10 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ol
-  class:bx--list--ordered="{!native}"
-  class:bx--list--ordered--native="{native}"
-  class:bx--list--nested="{nested}"
-  class:bx--list--expressive="{expressive}"
+  class:bx--list--ordered={!native}
+  class:bx--list--ordered--native={native}
+  class:bx--list--nested={nested}
+  class:bx--list--expressive={expressive}
   {...$$restProps}
   on:click
   on:mouseover

src/OverflowMenu/OverflowMenu.svelte

@@ -180,84 +180,84 @@
 </svelte:head>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (buttonRef && buttonRef.contains(target)) return;
     if (menuRef && !menuRef.contains(target)) {
       open = false;
     }
-  }}"
+  }}
 />
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
-  bind:this="{buttonRef}"
+  bind:this={buttonRef}
   type="button"
   aria-haspopup="true"
-  aria-expanded="{open}"
-  aria-label="{ariaLabel}"
-  id="{id}"
-  class:bx--overflow-menu="{true}"
-  class:bx--overflow-menu--open="{open}"
-  class:bx--overflow-menu--light="{light}"
-  class:bx--overflow-menu--sm="{size === 'sm'}"
-  class:bx--overflow-menu--xl="{size === 'xl'}"
+  aria-expanded={open}
+  aria-label={ariaLabel}
+  {id}
+  class:bx--overflow-menu={true}
+  class:bx--overflow-menu--open={open}
+  class:bx--overflow-menu--light={light}
+  class:bx--overflow-menu--sm={size === "sm"}
+  class:bx--overflow-menu--xl={size === "xl"}
   {...$$restProps}
   on:click
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (!(menuRef && menuRef.contains(target))) {
       open = !open;
-      if (!open) dispatch('close');
+      if (!open) dispatch("close");
     }
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (open) {
-      if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(e.key)) {
+      if (["ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp"].includes(e.key)) {
         e.preventDefault();
-      } else if (e.key === 'Escape') {
+      } else if (e.key === "Escape") {
         e.stopPropagation();
-        dispatch('close');
+        dispatch("close");
         open = false;
         buttonRef.focus();
       }
     }
-  }}"
-  on:focusout="{(e) => {
+  }}
+  on:focusout={(e) => {
     if (open) {
       if (!buttonRef.contains(e.relatedTarget)) {
-        dispatch('close');
+        dispatch("close");
         open = false;
       }
     }
-  }}"
+  }}
 >
   <slot name="menu">
     <svelte:component
-      this="{icon}"
-      aria-label="{iconDescription}"
-      title="{iconDescription}"
+      this={icon}
+      aria-label={iconDescription}
+      title={iconDescription}
       class="bx--overflow-menu__icon {iconClass}"
     />
   </slot>
   {#if open}
     <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
     <ul
-      bind:this="{menuRef}"
+      bind:this={menuRef}
       role="menu"
       tabindex="-1"
-      aria-label="{ariaLabel}"
-      data-floating-menu-direction="{direction}"
-      class:bx--overflow-menu-options="{true}"
-      class:bx--overflow-menu--flip="{flipped}"
-      class:bx--overflow-menu-options--open="{open}"
-      class:bx--overflow-menu-options--light="{light}"
-      class:bx--overflow-menu-options--sm="{size === 'sm'}"
-      class:bx--overflow-menu-options--xl="{size === 'xl'}"
-      class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
-      class="{menuOptionsClass}"
+      aria-label={ariaLabel}
+      data-floating-menu-direction={direction}
+      class:bx--overflow-menu-options={true}
+      class:bx--overflow-menu--flip={flipped}
+      class:bx--overflow-menu-options--open={open}
+      class:bx--overflow-menu-options--light={light}
+      class:bx--overflow-menu-options--sm={size === "sm"}
+      class:bx--overflow-menu-options--xl={size === "xl"}
+      class:bx--breadcrumb-menu-options={!!ctxBreadcrumbItem}
+      class={menuOptionsClass}
     >
       <slot />
     </ul>

src/OverflowMenu/OverflowMenuItem.svelte

@@ -54,57 +54,57 @@
 
 <li
   role="none"
-  id="{id}"
-  class:bx--overflow-menu-options__option="{true}"
-  class:bx--overflow-menu--divider="{hasDivider}"
-  class:bx--overflow-menu-options__option--danger="{danger}"
-  class:bx--overflow-menu-options__option--disabled="{disabled}"
+  {id}
+  class:bx--overflow-menu-options__option={true}
+  class:bx--overflow-menu--divider={hasDivider}
+  class:bx--overflow-menu-options__option--danger={danger}
+  class:bx--overflow-menu-options__option--disabled={disabled}
   {...$$restProps}
 >
   {#if href}
     <!-- svelte-ignore a11y-missing-attribute -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <a
-      bind:this="{ref}"
+      bind:this={ref}
       {...buttonProps}
       on:click
-      on:click="{() => {
+      on:click={() => {
         update(id);
-      }}"
+      }}
       on:keydown
-      on:keydown="{({ key }) => {
-        if (key === 'ArrowDown') {
+      on:keydown={({ key }) => {
+        if (key === "ArrowDown") {
           change(1);
-        } else if (key === 'ArrowUp') {
+        } else if (key === "ArrowUp") {
           change(-1);
         }
-      }}"
+      }}
     >
       <slot>
-        <div class:bx--overflow-menu-options__option-content="{true}">
+        <div class:bx--overflow-menu-options__option-content={true}>
           {text}
         </div>
       </slot>
     </a>
   {:else}
     <button
-      bind:this="{ref}"
+      bind:this={ref}
       {...buttonProps}
       on:click
-      on:click="{() => {
+      on:click={() => {
         update(id);
-      }}"
+      }}
       on:keydown
-      on:keydown="{({ key }) => {
-        if (key === 'ArrowDown') {
+      on:keydown={({ key }) => {
+        if (key === "ArrowDown") {
           change(1);
-        } else if (key === 'ArrowUp') {
+        } else if (key === "ArrowUp") {
           change(-1);
         }
-      }}"
+      }}
     >
       <slot>
-        <div class:bx--overflow-menu-options__option-content="{true}">
+        <div class:bx--overflow-menu-options__option-content={true}>
           {text}
         </div>
       </slot>

src/Pagination/Pagination.svelte

@@ -94,13 +94,13 @@
   $: forwardButtonDisabled = disabled || page === totalPages;
 </script>
 
-<div id="{id}" class:bx--pagination="{true}" {...$$restProps}>
-  <div class:bx--pagination__left="{true}">
+<div {id} class:bx--pagination={true} {...$$restProps}>
+  <div class:bx--pagination__left={true}>
     {#if !pageSizeInputDisabled}
       <label
         id="bx--pagination-select-{id}-count-label"
         for="bx--pagination-select-{id}"
-        class:bx--pagination__text="{true}"
+        class:bx--pagination__text={true}
       >
         {itemsPerPageText}
       </label>
@@ -110,29 +110,29 @@
         hideLabel
         noLabel
         inline
-        on:change="{() => {
-          dispatch('change', { pageSize });
-        }}"
-        bind:selected="{pageSize}"
+        on:change={() => {
+          dispatch("change", { pageSize });
+        }}
+        bind:selected={pageSize}
       >
         {#each pageSizes as size, i (size)}
-          <SelectItem value="{size}" text="{size.toString()}" />
+          <SelectItem value={size} text={size.toString()} />
         {/each}
       </Select>
     {/if}
-    <span class:bx--pagination__text="{!pageSizeInputDisabled}">
+    <span class:bx--pagination__text={!pageSizeInputDisabled}>
       {#if pagesUnknown}
         {itemText(pageSize * (page - 1) + 1, page * pageSize)}
       {:else}
         {itemRangeText(
           Math.min(pageSize * (page - 1) + 1, totalItems),
           Math.min(page * pageSize, totalItems),
-          totalItems
+          totalItems,
         )}
       {/if}
     </span>
   </div>
-  <div class:bx--pagination__right="{true}">
+  <div class:bx--pagination__right={true}>
     {#if !pageInputDisabled}
       <Select
         id="bx--pagination-select-{id + 2}"
@@ -140,16 +140,16 @@
         labelText="Page number, of {totalPages} pages"
         inline
         hideLabel
-        on:change="{() => {
-          dispatch('change', { page });
-        }}"
-        bind:selected="{page}"
+        on:change={() => {
+          dispatch("change", { page });
+        }}
+        bind:selected={page}
       >
         {#each selectItems as size, i (size)}
-          <SelectItem value="{size + 1}" text="{(size + 1).toString()}" />
+          <SelectItem value={size + 1} text={(size + 1).toString()} />
         {/each}
       </Select>
-      <span class:bx--pagination__text="{true}">
+      <span class:bx--pagination__text={true}>
         {#if pagesUnknown}
           {pageText(page)}
         {:else}{pageRangeText(page, totalPages)}{/if}
@@ -159,33 +159,33 @@
       kind="ghost"
       tooltipAlignment="center"
       tooltipPosition="top"
-      icon="{CaretLeft}"
-      iconDescription="{backwardText}"
-      disabled="{backButtonDisabled}"
+      icon={CaretLeft}
+      iconDescription={backwardText}
+      disabled={backButtonDisabled}
       class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
         ? 'bx--pagination__button--no-index'
         : ''}"
-      on:click="{() => {
+      on:click={() => {
         page--;
-        dispatch('click:button--previous', { page });
-        dispatch('change', { page });
-      }}"
+        dispatch("click:button--previous", { page });
+        dispatch("change", { page });
+      }}
     />
     <Button
       kind="ghost"
       tooltipAlignment="end"
       tooltipPosition="top"
-      icon="{CaretRight}"
-      iconDescription="{forwardText}"
-      disabled="{forwardButtonDisabled}"
+      icon={CaretRight}
+      iconDescription={forwardText}
+      disabled={forwardButtonDisabled}
       class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled
         ? 'bx--pagination__button--no-index'
         : ''}"
-      on:click="{() => {
+      on:click={() => {
         page++;
-        dispatch('click:button--next', { page });
-        dispatch('change', { page });
-      }}"
+        dispatch("click:button--next", { page });
+        dispatch("change", { page });
+      }}
     />
   </div>
 </div>

src/Pagination/PaginationSkeleton.svelte

@@ -5,23 +5,20 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--pagination="{true}"
-  class:bx--skeleton="{true}"
+  class:bx--pagination={true}
+  class:bx--skeleton={true}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--pagination__left="{true}">
+  <div class:bx--pagination__left={true}>
     <SkeletonText width="70px" />
     <SkeletonText width="35px" />
     <SkeletonText width="105px" />
   </div>
-  <div
-    class:bx--pagination__right="{true}"
-    class:bx--pagination--inline="{true}"
-  >
+  <div class:bx--pagination__right={true} class:bx--pagination--inline={true}>
     <SkeletonText width="70px" />
   </div>
 </div>

src/PaginationNav/PaginationItem.svelte

@@ -6,16 +6,16 @@
   export let active = false;
 </script>
 
-<li class:bx--pagination-nav__list-item="{true}">
+<li class:bx--pagination-nav__list-item={true}>
   <button
     type="button"
-    data-page="{page}"
-    aria-current="{active ? 'page' : undefined}"
-    class:bx--pagination-nav__page="{true}"
-    class:bx--pagination-nav__page--active="{active}"
+    data-page={page}
+    aria-current={active ? "page" : undefined}
+    class:bx--pagination-nav__page={true}
+    class:bx--pagination-nav__page--active={active}
     on:click
   >
-    <span class:bx--pagination-nav__accessibility-label="{true}">
+    <span class:bx--pagination-nav__accessibility-label={true}>
       <slot />
     </span>
     {page}

src/PaginationNav/PaginationNav.svelte

@@ -76,111 +76,111 @@
     .slice(startOffset + front, (back + 1) * -1);
 </script>
 
-<nav aria-label="pagination" class:bx--pagination-nav="{true}" {...$$restProps}>
-  <ul class:bx--pagination-nav__list="{true}">
-    <li class:bx--pagination-nav__list-item="{true}">
+<nav aria-label="pagination" class:bx--pagination-nav={true} {...$$restProps}>
+  <ul class:bx--pagination-nav__list={true}>
+    <li class:bx--pagination-nav__list-item={true}>
       <Button
         kind="ghost"
         tooltipAlignment="center"
-        tooltipPosition="{tooltipPosition === 'inside'
-          ? 'right'
-          : tooltipPosition === 'outside'
-          ? 'left'
-          : tooltipPosition}"
-        iconDescription="{backwardText}"
-        disabled="{!loop && page === 1}"
-        icon="{CaretLeft}"
-        on:click="{() => {
+        tooltipPosition={tooltipPosition === "inside"
+          ? "right"
+          : tooltipPosition === "outside"
+            ? "left"
+            : tooltipPosition}
+        iconDescription={backwardText}
+        disabled={!loop && page === 1}
+        icon={CaretLeft}
+        on:click={() => {
           if (page <= 1) {
             if (loop) page = total;
           } else {
             page--;
           }
-          dispatch('click:button--previous', { page });
-          dispatch('change', { page });
-        }}"
+          dispatch("click:button--previous", { page });
+          dispatch("change", { page });
+        }}
       />
     </li>
     {#if fit > MIN || (fit <= MIN && page <= 1)}
       <PaginationItem
-        page="{1}"
-        active="{page === 1}"
-        on:click="{() => {
+        page={1}
+        active={page === 1}
+        on:click={() => {
           page = 1;
-          dispatch('change', { page });
-        }}"
+          dispatch("change", { page });
+        }}
       >
         {page === 1 ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
     <PaginationOverflow
-      fromIndex="{startOffset}"
-      count="{front}"
-      on:select="{({ detail }) => {
+      fromIndex={startOffset}
+      count={front}
+      on:select={({ detail }) => {
         page = detail.index;
-        dispatch('change', { page });
-      }}"
+        dispatch("change", { page });
+      }}
     />
     {#each items as item}
       <PaginationItem
-        page="{item + 1}"
-        active="{page === item + 1}"
-        on:click="{() => {
+        page={item + 1}
+        active={page === item + 1}
+        on:click={() => {
           page = item + 1;
-          dispatch('change', { page });
-        }}"
+          dispatch("change", { page });
+        }}
       >
         {page === item ? "Active, Page" : "Page"}
       </PaginationItem>
     {/each}
     <PaginationOverflow
-      fromIndex="{total - back - 1}"
-      count="{back}"
-      on:select="{({ detail }) => {
+      fromIndex={total - back - 1}
+      count={back}
+      on:select={({ detail }) => {
         page = detail.index;
-        dispatch('change', { page });
-      }}"
+        dispatch("change", { page });
+      }}
     />
     {#if total > 1}
       <PaginationItem
-        page="{total}"
-        active="{page === total}"
-        on:click="{() => {
+        page={total}
+        active={page === total}
+        on:click={() => {
           page = total;
-          dispatch('change', { page });
-        }}"
+          dispatch("change", { page });
+        }}
       >
         {page === total ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
-    <li class:bx--pagination-nav__list-item="{true}">
+    <li class:bx--pagination-nav__list-item={true}>
       <Button
         kind="ghost"
         tooltipAlignment="center"
-        tooltipPosition="{tooltipPosition === 'inside'
-          ? 'left'
-          : tooltipPosition === 'outside'
-          ? 'right'
-          : tooltipPosition}"
-        iconDescription="{forwardText}"
-        disabled="{!loop && page === total}"
-        icon="{CaretRight}"
-        on:click="{() => {
+        tooltipPosition={tooltipPosition === "inside"
+          ? "left"
+          : tooltipPosition === "outside"
+            ? "right"
+            : tooltipPosition}
+        iconDescription={forwardText}
+        disabled={!loop && page === total}
+        icon={CaretRight}
+        on:click={() => {
           if (page >= total) {
             if (loop) page = 1;
           } else {
             page++;
           }
-          dispatch('click:button--next', { page });
-          dispatch('change', { page });
-        }}"
+          dispatch("click:button--next", { page });
+          dispatch("change", { page });
+        }}
       />
     </li>
   </ul>
   <div
     aria-live="polite"
     aria-atomic="true"
-    class:bx--pagination-nav__accessibility-label="{true}"
+    class:bx--pagination-nav__accessibility-label={true}
   >
     Page
     {page + 1}

src/PaginationNav/PaginationOverflow.svelte

@@ -19,37 +19,37 @@
 </script>
 
 {#if count > 1}
-  <li class:bx--pagination-nav__list-item="{true}">
-    <div class:bx--pagination-nav__select="{true}">
+  <li class:bx--pagination-nav__list-item={true}>
+    <div class:bx--pagination-nav__select={true}>
       <!-- svelte-ignore a11y-no-onchange -->
       <select
         aria-label="Select Page number"
-        value="{value}"
-        class:bx--pagination-nav__page="{true}"
-        class:bx--pagination-nav__page--select="{true}"
-        on:change="{({ target }) => {
-          value = '';
-          dispatch('select', { index: Number(target.value) });
-        }}"
+        {value}
+        class:bx--pagination-nav__page={true}
+        class:bx--pagination-nav__page--select={true}
+        on:change={({ target }) => {
+          value = "";
+          dispatch("select", { index: Number(target.value) });
+        }}
       >
         <option value="" hidden></option>
         {#each Array.from({ length: count }, (_, i) => i) as i}
-          <option value="{fromIndex + i + 1}" data-page="{fromIndex + i + 1}">
+          <option value={fromIndex + i + 1} data-page={fromIndex + i + 1}>
             {fromIndex + i + 1}
           </option>
         {/each}
       </select>
-      <div class:bx--pagination-nav__select-icon-wrapper="{true}">
+      <div class:bx--pagination-nav__select-icon-wrapper={true}>
         <OverflowMenuHorizontal class="bx--pagination-nav__select-icon" />
       </div>
     </div>
   </li>
 {:else if count === 1}
   <PaginationItem
-    page="{fromIndex + 1}"
-    on:click="{() => {
-      dispatch('select', { index: fromIndex });
-    }}"
+    page={fromIndex + 1}
+    on:click={() => {
+      dispatch("select", { index: fromIndex });
+    }}
   >
     Page
   </PaginationItem>

src/Popover/Popover.svelte

@@ -35,39 +35,39 @@
 </script>
 
 <svelte:window
-  on:click="{(e) => {
+  on:click={(e) => {
     if (!open) return;
     if (!ref.contains(e.target)) {
-      dispatch('click:outside', { target: e.target });
+      dispatch("click:outside", { target: e.target });
       if (closeOnOutsideClick) open = false;
     }
-  }}"
+  }}
 />
 
 <div
-  bind:this="{ref}"
-  class:bx--popover="{true}"
-  class:bx--popover--caret="{caret}"
-  class:bx--popover--light="{light}"
-  class:bx--popover--high-contrast="{highContrast}"
-  class:bx--popover--top="{align === 'top'}"
-  class:bx--popover--top-left="{align === 'top-left'}"
-  class:bx--popover--top-right="{align === 'top-right'}"
-  class:bx--popover--bottom="{align === 'bottom'}"
-  class:bx--popover--bottom-left="{align === 'bottom-left'}"
-  class:bx--popover--bottom-right="{align === 'bottom-right'}"
-  class:bx--popover--left="{align === 'left'}"
-  class:bx--popover--left-bottom="{align === 'left-bottom'}"
-  class:bx--popover--left-top="{align === 'left-top'}"
-  class:bx--popover--right="{align === 'right'}"
-  class:bx--popover--right-bottom="{align === 'right-bottom'}"
-  class:bx--popover--right-top="{align === 'right-top'}"
-  class:bx--popover--open="{open}"
-  class:bx--popover--relative="{relative}"
-  style:position="{relative ? "relative" : undefined}"
+  bind:this={ref}
+  class:bx--popover={true}
+  class:bx--popover--caret={caret}
+  class:bx--popover--light={light}
+  class:bx--popover--high-contrast={highContrast}
+  class:bx--popover--top={align === "top"}
+  class:bx--popover--top-left={align === "top-left"}
+  class:bx--popover--top-right={align === "top-right"}
+  class:bx--popover--bottom={align === "bottom"}
+  class:bx--popover--bottom-left={align === "bottom-left"}
+  class:bx--popover--bottom-right={align === "bottom-right"}
+  class:bx--popover--left={align === "left"}
+  class:bx--popover--left-bottom={align === "left-bottom"}
+  class:bx--popover--left-top={align === "left-top"}
+  class:bx--popover--right={align === "right"}
+  class:bx--popover--right-bottom={align === "right-bottom"}
+  class:bx--popover--right-top={align === "right-top"}
+  class:bx--popover--open={open}
+  class:bx--popover--relative={relative}
+  style:position={relative ? "relative" : undefined}
   {...$$restProps}
 >
-  <div class:bx--popover-contents="{true}">
+  <div class:bx--popover-contents={true}>
     <slot />
   </div>
 </div>

src/ProgressBar/ProgressBar.svelte

@@ -62,48 +62,48 @@
 </script>
 
 <div
-  class:bx--progress-bar="{true}"
-  class:bx--progress-bar--indeterminate="{indeterminate}"
-  class:bx--progress-bar--big="{size === 'md'}"
-  class:bx--progress-bar--small="{size === 'sm'}"
-  class:bx--progress-bar--inline="{kind === 'inline'}"
-  class:bx--progress-bar--indented="{kind === 'indented'}"
-  class:bx--progress-bar--error="{status === 'error'}"
-  class:bx--progress-bar--finished="{status === 'finished'}"
+  class:bx--progress-bar={true}
+  class:bx--progress-bar--indeterminate={indeterminate}
+  class:bx--progress-bar--big={size === "md"}
+  class:bx--progress-bar--small={size === "sm"}
+  class:bx--progress-bar--inline={kind === "inline"}
+  class:bx--progress-bar--indented={kind === "indented"}
+  class:bx--progress-bar--error={status === "error"}
+  class:bx--progress-bar--finished={status === "finished"}
   {...$$restProps}
 >
   <label
-    for="{id}"
-    class:bx--progress-bar__label="{true}"
-    class:bx--visually-hidden="{hideLabel}"
+    for={id}
+    class:bx--progress-bar__label={true}
+    class:bx--visually-hidden={hideLabel}
   >
     <slot name="labelText">
       {labelText}
     </slot>
     {#if status === "error" || status === "finished"}
       <svelte:component
-        this="{statusIcons[status]}"
+        this={statusIcons[status]}
         class="bx--progress-bar__status-icon"
       />
     {/if}
   </label>
   <div
     role="progressbar"
-    id="{id}"
-    class:bx--progress-bar__track="{true}"
-    aria-busy="{status === 'active'}"
-    aria-valuemin="{indeterminate ? undefined : 0}"
-    aria-valuemax="{indeterminate ? undefined : max}"
-    aria-valuenow="{indeterminate ? undefined : capped}"
-    aria-describedby="{helperText ? helperId : null}"
+    {id}
+    class:bx--progress-bar__track={true}
+    aria-busy={status === "active"}
+    aria-valuemin={indeterminate ? undefined : 0}
+    aria-valuemax={indeterminate ? undefined : max}
+    aria-valuenow={indeterminate ? undefined : capped}
+    aria-describedby={helperText ? helperId : null}
   >
     <div
-      class:bx--progress-bar__bar="{true}"
-      style:transform="{status === "active" && `scaleX(${capped / max})`}"
+      class:bx--progress-bar__bar={true}
+      style:transform={status === "active" && `scaleX(${capped / max})`}
     ></div>
   </div>
   {#if helperText}
-    <div id="{helperId}" class:bx--progress-bar__helper-text="{true}">
+    <div id={helperId} class:bx--progress-bar__helper-text={true}>
       {helperText}
     </div>
   {/if}

src/ProgressIndicator/ProgressIndicator.svelte

@@ -17,7 +17,7 @@
   const dispatch = createEventDispatcher();
   const steps = writable([]);
   const stepsById = derived(steps, (steps) =>
-    steps.reduce((a, c) => ({ ...a, [c.id]: c }), {})
+    steps.reduce((a, c) => ({ ...a, [c.id]: c }), {}),
   );
   const preventChangeOnClickStore = writable(preventChangeOnClick);
 
@@ -58,7 +58,7 @@
     _.map((step, i) => ({
       ...step,
       current: i === currentIndex,
-    }))
+    })),
   );
   $: preventChangeOnClickStore.set(preventChangeOnClick);
 </script>
@@ -66,9 +66,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ul
-  class:bx--progress="{true}"
-  class:bx--progress--vertical="{vertical}"
-  class:bx--progress--space-equal="{spaceEqually && !vertical}"
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  class:bx--progress--space-equal={spaceEqually && !vertical}
   {...$$restProps}
   on:click
   on:mouseover

src/ProgressIndicator/ProgressIndicatorSkeleton.svelte

@@ -9,9 +9,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ul
-  class:bx--progress="{true}"
-  class:bx--progress--vertical="{vertical}"
-  class:bx--skeleton="{true}"
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  class:bx--skeleton={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -20,18 +20,18 @@
 >
   {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
     <li
-      class:bx--progress-step="{true}"
-      class:bx--progress-step--incomplete="{true}"
+      class:bx--progress-step={true}
+      class:bx--progress-step--incomplete={true}
     >
       <div
-        class:bx--progress-step-button="{true}"
-        class:bx--progress-step-button--unclickable="{true}"
+        class:bx--progress-step-button={true}
+        class:bx--progress-step-button--unclickable={true}
       >
         <svg>
           <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
         </svg>
-        <p class:bx--progress-label="{true}"></p>
-        <span class:bx--progress-line="{true}"></span>
+        <p class:bx--progress-label={true}></p>
+        <span class:bx--progress-line={true}></span>
       </div>
     </li>
   {/each}

src/ProgressIndicator/ProgressStep.svelte

@@ -53,55 +53,55 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
-  id="{id}"
-  class:bx--progress-step="{true}"
-  class:bx--progress-step--current="{current}"
-  class:bx--progress-step--complete="{complete}"
-  class:bx--progress-step--incomplete="{!complete && !current}"
-  class:bx--progress-step--disabled="{disabled}"
+  {id}
+  class:bx--progress-step={true}
+  class:bx--progress-step--current={current}
+  class:bx--progress-step--complete={complete}
+  class:bx--progress-step--incomplete={!complete && !current}
+  class:bx--progress-step--disabled={disabled}
   {...$$restProps}
 >
   <button
     type="button"
-    disabled="{disabled}"
-    aria-disabled="{disabled}"
-    tabindex="{!current && !disabled ? '0' : '-1'}"
-    class:bx--progress-step-button="{true}"
-    class:bx--progress-step-button--unclickable="{current ||
-      $preventChangeOnClick}"
+    {disabled}
+    aria-disabled={disabled}
+    tabindex={!current && !disabled ? "0" : "-1"}
+    class:bx--progress-step-button={true}
+    class:bx--progress-step-button--unclickable={current ||
+      $preventChangeOnClick}
     on:click
-    on:click="{() => {
+    on:click={() => {
       if (!step.complete) return;
       change(step.index);
-    }}"
+    }}
     on:mouseover
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown="{(e) => {
+    on:keydown={(e) => {
       if (!step.complete) return;
-      if (e.key === ' ' || e.key === 'Enter') {
+      if (e.key === " " || e.key === "Enter") {
         change(step.index);
       }
-    }}"
+    }}
   >
     {#if invalid}
-      <Warning class="bx--progress__warning" title="{description}" />
+      <Warning class="bx--progress__warning" title={description} />
     {:else if current}
-      <Incomplete title="{description}" />
+      <Incomplete title={description} />
     {:else if complete}
-      <CheckmarkOutline title="{description}" />
+      <CheckmarkOutline title={description} />
     {:else}
-      <CircleDash title="{description}" />
+      <CircleDash title={description} />
     {/if}
-    <div class:bx--progress-text="{true}">
-      <slot props="{{ class: 'bx--progress-label' }}">
-        <p class:bx--progress-label="{true}">{label}</p>
+    <div class:bx--progress-text={true}>
+      <slot props={{ class: "bx--progress-label" }}>
+        <p class:bx--progress-label={true}>{label}</p>
       </slot>
       {#if secondaryLabel}
-        <p class:bx--progress-optional="{true}">{secondaryLabel}</p>
+        <p class:bx--progress-optional={true}>{secondaryLabel}</p>
       {/if}
     </div>
-    <span class:bx--progress-line="{true}"></span>
+    <span class:bx--progress-line={true}></span>
   </button>
 </li>

src/RadioButton/RadioButton.svelte

@@ -42,7 +42,7 @@
   import { readable } from "svelte/store";
 
   const { add, update, selectedValue, groupName, groupRequired } = getContext(
-    "RadioButtonGroup"
+    "RadioButtonGroup",
   ) ?? {
     groupName: readable(undefined),
     groupRequired: readable(undefined),
@@ -57,31 +57,31 @@
 </script>
 
 <div
-  class:bx--radio-button-wrapper="{true}"
-  class:bx--radio-button-wrapper--label-left="{labelPosition === 'left'}"
+  class:bx--radio-button-wrapper={true}
+  class:bx--radio-button-wrapper--label-left={labelPosition === "left"}
   {...$$restProps}
 >
   <input
-    bind:this="{ref}"
+    bind:this={ref}
     type="radio"
-    id="{id}"
-    name="{$groupName ?? name}"
-    checked="{checked}"
-    disabled="{disabled}"
-    required="{$groupRequired ?? required}"
-    value="{value}"
-    class:bx--radio-button="{true}"
+    {id}
+    name={$groupName ?? name}
+    {checked}
+    {disabled}
+    required={$groupRequired ?? required}
+    {value}
+    class:bx--radio-button={true}
     on:change
-    on:change="{() => {
+    on:change={() => {
       if (update) {
         update(value);
       }
-    }}"
+    }}
   />
-  <label class:bx--radio-button__label="{true}" for="{id}">
-    <span class:bx--radio-button__appearance="{true}"></span>
+  <label class:bx--radio-button__label={true} for={id}>
+    <span class:bx--radio-button__appearance={true}></span>
     {#if labelText || $$slots.labelText}
-      <span class:bx--visually-hidden="{hideLabel}">
+      <span class:bx--visually-hidden={hideLabel}>
         <slot name="labelText">
           {labelText}
         </slot>

src/RadioButton/RadioButtonSkeleton.svelte

@@ -1,14 +1,13 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--radio-button-wrapper="{true}"
+  class:bx--radio-button-wrapper={true}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div>
-  <span class:bx--radio-button__label="{true}" class:bx--skeleton="{true}"
-  ></span>
+  <div class:bx--radio-button={true} class:bx--skeleton={true}></div>
+  <span class:bx--radio-button__label={true} class:bx--skeleton={true}></span>
 </div>

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -95,8 +95,8 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  id="{id}"
-  class:bx--form-item="{true}"
+  {id}
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -104,14 +104,14 @@
   on:mouseleave
 >
   <fieldset
-    class:bx--radio-button-group="{true}"
-    class:bx--radio-button-group--vertical="{orientation === 'vertical'}"
-    class:bx--radio-button-group--label-left="{labelPosition === 'left'}"
-    class:bx--radio-button-group--label-right="{labelPosition === 'right'}"
-    disabled="{disabled}"
+    class:bx--radio-button-group={true}
+    class:bx--radio-button-group--vertical={orientation === "vertical"}
+    class:bx--radio-button-group--label-left={labelPosition === "left"}
+    class:bx--radio-button-group--label-right={labelPosition === "right"}
+    {disabled}
   >
     {#if legendText || $$slots.legendText}
-      <legend class:bx--label="{true}" class:bx--visually-hidden="{hideLegend}">
+      <legend class:bx--label={true} class:bx--visually-hidden={hideLegend}>
         <slot name="legendText">{legendText}</slot>
       </legend>
     {/if}

src/RecursiveList/RecursiveList.svelte

@@ -22,14 +22,14 @@
 </script>
 
 <svelte:component
-  this="{type === 'unordered' ? UnorderedList : OrderedList}"
-  native="{type === 'ordered-native'}"
+  this={type === "unordered" ? UnorderedList : OrderedList}
+  native={type === "ordered-native"}
   {...$$restProps}
 >
   {#each nodes as child}
     {#if Array.isArray(child.nodes)}
       <RecursiveListItem {...child}>
-        <svelte:self {...child} type="{type}" nested />
+        <svelte:self {...child} {type} nested />
       </RecursiveListItem>
     {:else}
       <RecursiveListItem {...child} />

src/RecursiveList/RecursiveListItem.svelte

@@ -13,7 +13,7 @@
 
 <ListItem>
   {#if text && !href}{text}{/if}
-  {#if href}<a class:bx--link="{true}" href="{href}">{text || href}</a>{/if}
+  {#if href}<a class:bx--link={true} {href}>{text || href}</a>{/if}
   {#if !text && html}{@html html}{/if}
   <slot />
 </ListItem>

src/Search/Search.svelte

@@ -82,7 +82,7 @@
 <!-- svelte-ignore a11y-autofocus -->
 {#if skeleton}
   <SearchSkeleton
-    size="{size}"
+    {size}
     {...$$restProps}
     on:click
     on:mouseover
@@ -93,81 +93,81 @@
   <div
     role="search"
     aria-labelledby="{id}-search"
-    class:bx--search="{true}"
-    class:bx--search--light="{light}"
-    class:bx--search--disabled="{disabled}"
-    class:bx--search--sm="{size === 'sm'}"
-    class:bx--search--lg="{size === 'lg'}"
-    class:bx--search--xl="{size === 'xl'}"
-    class:bx--search--expandable="{expandable}"
-    class:bx--search--expanded="{expanded}"
-    class="{searchClass}"
+    class:bx--search={true}
+    class:bx--search--light={light}
+    class:bx--search--disabled={disabled}
+    class:bx--search--sm={size === "sm"}
+    class:bx--search--lg={size === "lg"}
+    class:bx--search--xl={size === "xl"}
+    class:bx--search--expandable={expandable}
+    class:bx--search--expanded={expanded}
+    class={searchClass}
   >
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      bind:this="{searchRef}"
-      class:bx--search-magnifier="{true}"
-      on:click="{() => {
+      bind:this={searchRef}
+      class:bx--search-magnifier={true}
+      on:click={() => {
         if (expandable) expanded = true;
-      }}"
+      }}
     >
-      <svelte:component this="{icon}" class="bx--search-magnifier-icon" />
+      <svelte:component this={icon} class="bx--search-magnifier-icon" />
     </div>
-    <label id="{id}-search" for="{id}" class:bx--label="{true}">
+    <label id="{id}-search" for={id} class:bx--label={true}>
       <slot name="labelText">
         {labelText}
       </slot>
     </label>
     <!-- svelte-ignore a11y-autofocus -->
     <input
-      bind:this="{ref}"
+      bind:this={ref}
       bind:value
       type="text"
       role="searchbox"
-      class:bx--search-input="{true}"
-      autofocus="{autofocus === true ? true : undefined}"
-      autocomplete="{autocomplete}"
-      disabled="{disabled}"
-      id="{id}"
-      placeholder="{placeholder}"
+      class:bx--search-input={true}
+      autofocus={autofocus === true ? true : undefined}
+      {autocomplete}
+      {disabled}
+      {id}
+      {placeholder}
       {...$$restProps}
       on:change
       on:input
       on:focus
-      on:focus="{() => {
+      on:focus={() => {
         if (expandable) expanded = true;
-      }}"
+      }}
       on:blur
-      on:blur="{() => {
-        if (expanded && (value === '' || value == null)) {
+      on:blur={() => {
+        if (expanded && (value === "" || value == null)) {
           expanded = false;
         }
-      }}"
+      }}
       on:keydown
-      on:keydown="{({ key }) => {
-        if (key === 'Escape') {
-          value = '';
-          dispatch('clear');
+      on:keydown={({ key }) => {
+        if (key === "Escape") {
+          value = "";
+          dispatch("clear");
         }
-      }}"
+      }}
       on:keyup
       on:paste
     />
     <button
       type="button"
-      aria-label="{closeButtonLabelText}"
-      disabled="{disabled}"
-      class:bx--search-close="{true}"
-      class:bx--search-close--hidden="{value === '' || value == null}"
+      aria-label={closeButtonLabelText}
+      {disabled}
+      class:bx--search-close={true}
+      class:bx--search-close--hidden={value === "" || value == null}
       on:click
-      on:click="{() => {
-        value = '';
+      on:click={() => {
+        value = "";
         ref.focus();
-        dispatch('clear');
-      }}"
+        dispatch("clear");
+      }}
     >
-      <svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
+      <svelte:component this={Close} size={size === "xl" ? 20 : 16} />
     </button>
   </div>
 {/if}