chore: format files with Prettier 3

src/UIShell/Content.svelte

@@ -15,9 +15,9 @@
 </script>
 
 <main
-  id="{id}"
-  class:bx--content="{true}"
-  style:margin-left="{unsetLeftMargin ? 0 : undefined}"
+  {id}
+  class:bx--content={true}
+  style:margin-left={unsetLeftMargin ? 0 : undefined}
   {...$$restProps}
 >
   <slot />

src/UIShell/HamburgerMenu.svelte

@@ -30,16 +30,16 @@
 </script>
 
 <button
-  bind:this="{ref}"
+  bind:this={ref}
   type="button"
-  title="{ariaLabel}"
-  aria-label="{ariaLabel}"
-  class:bx--header__action="{true}"
-  class:bx--header__menu-trigger="{true}"
-  class:bx--header__menu-toggle="{true}"
+  title={ariaLabel}
+  aria-label={ariaLabel}
+  class:bx--header__action={true}
+  class:bx--header__menu-trigger={true}
+  class:bx--header__menu-toggle={true}
   {...$$restProps}
   on:click
-  on:click="{() => (isOpen = !isOpen)}"
+  on:click={() => (isOpen = !isOpen)}
 >
-  <svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
+  <svelte:component this={isOpen ? iconClose : iconMenu} size={20} />
 </button>

src/UIShell/Header.svelte

@@ -78,26 +78,22 @@
     : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
 </script>
 
-<svelte:window bind:innerWidth="{winWidth}" />
+<svelte:window bind:innerWidth={winWidth} />
 
-<header aria-label="{ariaLabel}" class:bx--header="{true}">
+<header aria-label={ariaLabel} class:bx--header={true}>
   <slot name="skip-to-content" />
   {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
-    <HamburgerMenu
-      bind:isOpen="{isSideNavOpen}"
-      iconClose="{iconClose}"
-      iconMenu="{iconMenu}"
-    />
+    <HamburgerMenu bind:isOpen={isSideNavOpen} {iconClose} {iconMenu} />
   {/if}
   <a
-    href="{href}"
-    class:bx--header__name="{true}"
-    bind:this="{ref}"
+    {href}
+    class:bx--header__name={true}
+    bind:this={ref}
     {...$$restProps}
     on:click
   >
     {#if company || $$slots.company}
-      <span class:bx--header__name--prefix="{true}"
+      <span class:bx--header__name--prefix={true}
         ><slot name="company">{company}&nbsp;</slot></span
       >
     {/if}

src/UIShell/HeaderAction.svelte

@@ -52,7 +52,7 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (
       isOpen &&
       !ref.contains(target) &&
@@ -60,47 +60,47 @@
       !preventCloseOnClickOutside
     ) {
       isOpen = false;
-      dispatch('close');
+      dispatch("close");
     }
-  }}"
+  }}
 />
 
 <button
-  bind:this="{ref}"
+  bind:this={ref}
   type="button"
-  class:bx--header__action="{true}"
-  class:bx--header__action--active="{isOpen}"
-  class:bx--header__action--text="{text}"
+  class:bx--header__action={true}
+  class:bx--header__action--active={isOpen}
+  class:bx--header__action--text={text}
   {...$$restProps}
   on:click
-  on:click|stopPropagation="{() => {
+  on:click|stopPropagation={() => {
     isOpen = !isOpen;
-    dispatch(isOpen ? 'open' : 'close');
-  }}"
+    dispatch(isOpen ? "open" : "close");
+  }}
 >
   {#if isOpen}
     <slot name="closeIcon">
-      <svelte:component this="{closeIcon}" size="{20}" />
+      <svelte:component this={closeIcon} size={20} />
     </slot>
   {:else}
     <slot name="icon">
-      <svelte:component this="{icon}" size="{20}" />
+      <svelte:component this={icon} size={20} />
     </slot>
   {/if}
   <slot name="text">
-    {#if text}<span class:bx--header__action-text="{true}">{text}</span>{/if}
+    {#if text}<span class:bx--header__action-text={true}>{text}</span>{/if}
   </slot>
 </button>
 {#if isOpen}
   <div
-    bind:this="{refPanel}"
-    class:bx--header-panel="{true}"
-    class:bx--header-panel--expanded="{true}"
+    bind:this={refPanel}
+    class:bx--header-panel={true}
+    class:bx--header-panel--expanded={true}
     style:overflow-y="auto"
-    transition:slide|local="{{
+    transition:slide|local={{
       ...transition,
       duration: transition === false ? 0 : transition.duration,
-    }}"
+    }}
   >
     <slot />
   </div>

src/UIShell/HeaderActionLink.svelte

@@ -19,16 +19,16 @@
 </script>
 
 <a
-  bind:this="{ref}"
-  class:bx--header__action="{true}"
-  class:bx--header__action--active="{linkIsActive}"
-  href="{href}"
-  rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
+  bind:this={ref}
+  class:bx--header__action={true}
+  class:bx--header__action--active={linkIsActive}
+  {href}
+  rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
   {...$$restProps}
   on:click
 >
   <slot name="icon">
-    <svelte:component this="{icon}" size="{20}" />
+    <svelte:component this={icon} size={20} />
   </slot>
 </a>
 

src/UIShell/HeaderGlobalAction.svelte

@@ -28,6 +28,6 @@
     .join(" ");
 </script>
 
-<Button bind:ref {...$$restProps} class="{buttonClass}" on:click>
-  <svelte:component this="{icon}" slot="icon" size="{20}" />
+<Button bind:ref {...$$restProps} class={buttonClass} on:click>
+  <svelte:component this={icon} slot="icon" size={20} />
 </Button>

src/UIShell/HeaderNav.svelte

@@ -5,9 +5,9 @@
   };
 </script>
 
-<nav {...props} class:bx--header__nav="{true}" {...$$restProps}>
+<nav {...props} class:bx--header__nav={true} {...$$restProps}>
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
-  <ul {...props} role="menubar" class:bx--header__menu-bar="{true}">
+  <ul {...props} role="menubar" class:bx--header__menu-bar={true}>
     <slot />
   </ul>
 </nav>

src/UIShell/HeaderNavItem.svelte

@@ -39,13 +39,13 @@
 
 <li role="none">
   <a
-    bind:this="{ref}"
+    bind:this={ref}
     role="menuitem"
     tabindex="0"
-    href="{href}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    class:bx--header__menu-item="{true}"
-    aria-current="{isSelected ? 'page' : undefined}"
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    class:bx--header__menu-item={true}
+    aria-current={isSelected ? "page" : undefined}
     {...$$restProps}
     on:click
     on:mouseover
@@ -55,12 +55,12 @@
     on:keydown
     on:focus
     on:blur
-    on:blur="{() => {
+    on:blur={() => {
       if (selectedItemIds.indexOf(id) === selectedItemIds.length - 1) {
         ctx?.closeMenu();
       }
-    }}"
+    }}
   >
-    <span class:bx--text-truncate--end="{true}"><slot>{text}</slot></span>
+    <span class:bx--text-truncate--end={true}><slot>{text}</slot></span>
   </a>
 </li>

src/UIShell/HeaderNavMenu.svelte

@@ -40,49 +40,49 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (!ref.contains(target)) {
       expanded = false;
     }
-  }}"
+  }}
 />
 
 <li
   role="none"
-  class:bx--header__submenu="{true}"
-  class:bx--header__submenu--current="{isCurrentSubmenu}"
-  on:click="{(e) => {
+  class:bx--header__submenu={true}
+  class:bx--header__submenu--current={isCurrentSubmenu}
+  on:click={(e) => {
     if (!menuRef.contains(e.target)) {
       e.preventDefault();
     }
     expanded = !expanded;
-  }}"
-  on:keydown="{(e) => {
-    if (e.key === 'Enter') {
+  }}
+  on:keydown={(e) => {
+    if (e.key === "Enter") {
       e.stopPropagation();
       expanded = !expanded;
     }
-  }}"
+  }}
 >
   <a
-    bind:this="{ref}"
+    bind:this={ref}
     role="menuitem"
     tabindex="0"
     aria-haspopup="menu"
-    aria-expanded="{expanded}"
-    aria-label="{text}"
-    href="{href}"
-    class:bx--header__menu-item="{true}"
-    class:bx--header__menu-title="{true}"
-    style:z-index="{1}"
+    aria-expanded={expanded}
+    aria-label={text}
+    {href}
+    class:bx--header__menu-item={true}
+    class:bx--header__menu-title={true}
+    style:z-index={1}
     {...$$restProps}
     on:keydown
-    on:keydown="{(e) => {
-      if (e.key === ' ') e.preventDefault();
-      if (e.key === 'Enter' || e.key === ' ') {
+    on:keydown={(e) => {
+      if (e.key === " ") e.preventDefault();
+      if (e.key === "Enter" || e.key === " ") {
         expanded = !expanded;
       }
-    }}"
+    }}
     on:click|preventDefault
     on:mouseover
     on:mouseenter
@@ -96,10 +96,10 @@
   </a>
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
-    bind:this="{menuRef}"
+    bind:this={menuRef}
     role="menu"
-    aria-label="{text}"
-    class:bx--header__menu="{true}"
+    aria-label={text}
+    class:bx--header__menu={true}
   >
     <slot />
   </ul>

src/UIShell/HeaderPanelDivider.svelte

@@ -1,9 +1,9 @@
 {#if $$slots.default}
-  <li class:bx--header-panel-divider="{true}">
+  <li class:bx--header-panel-divider={true}>
     <slot />
   </li>
 {/if}
-<hr class:bx--switcher__item--divider="{true}" />
+<hr class:bx--switcher__item--divider={true} />
 
 <style>
   /**

src/UIShell/HeaderPanelLink.svelte

@@ -9,12 +9,12 @@
   export let ref = null;
 </script>
 
-<li class:bx--switcher__item="{true}">
+<li class:bx--switcher__item={true}>
   <a
-    bind:this="{ref}"
-    href="{href}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    class:bx--switcher__item-link="{true}"
+    bind:this={ref}
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    class:bx--switcher__item-link={true}
     {...$$restProps}
     on:click
   >

src/UIShell/HeaderPanelLinks.svelte

@@ -1,3 +1,3 @@
-<ul class:bx--switcher__item="{true}">
+<ul class:bx--switcher__item={true}>
   <slot />
 </ul>

src/UIShell/HeaderSearch.svelte

@@ -55,66 +55,66 @@
 </script>
 
 <svelte:window
-  on:mouseup="{({ target }) => {
+  on:mouseup={({ target }) => {
     if (active && !refSearch.contains(target)) active = false;
-  }}"
+  }}
 />
 
 <div
-  bind:this="{refSearch}"
-  class:bx--header__search="{true}"
+  bind:this={refSearch}
+  class:bx--header__search={true}
   role="search"
-  class:bx--header__search--active="{active}"
+  class:bx--header__search--active={active}
 >
   <label
-    class:bx--header__search-label="{true}"
+    class:bx--header__search-label={true}
     for="search-input"
     id="search-label">Search</label
   >
   <div
-    class:bx--header__search-menu="{true}"
+    class:bx--header__search-menu={true}
     aria-owns="search-menu"
     aria-haspopup="menu"
   >
     <button
       type="button"
       aria-label="Search"
-      aria-expanded="{active}"
-      tabindex="{active ? '-1' : '0'}"
-      class:bx--header-search-button="{true}"
-      class:bx--header__action="{true}"
-      class:bx--header-search-button--disabled="{active}"
-      on:click="{() => {
+      aria-expanded={active}
+      tabindex={active ? "-1" : "0"}
+      class:bx--header-search-button={true}
+      class:bx--header__action={true}
+      class:bx--header-search-button--disabled={active}
+      on:click={() => {
         active = true;
-      }}"
+      }}
     >
-      <IconSearch size="{20}" title="Search" />
+      <IconSearch size={20} title="Search" />
     </button>
     <input
-      bind:this="{ref}"
+      bind:this={ref}
       type="text"
       autocomplete="off"
       placeholder="Search..."
-      tabindex="{active ? '0' : '-1'}"
-      class:bx--header__search-input="{true}"
-      class:bx--header__search--active="{active}"
+      tabindex={active ? "0" : "-1"}
+      class:bx--header__search-input={true}
+      class:bx--header__search--active={active}
       {...$$restProps}
       id="search-input"
       aria-autocomplete="list"
       aria-controls="search-menu"
-      aria-activedescendant="{selectedId}"
+      aria-activedescendant={selectedId}
       bind:value
       on:change
       on:input
       on:focus
       on:blur
       on:keydown
-      on:keydown="{(e) => {
+      on:keydown={(e) => {
         switch (e.key) {
-          case 'Enter':
+          case "Enter":
             selectResult();
             break;
-          case 'ArrowDown':
+          case "ArrowDown":
             e.preventDefault();
             if (selectedResultIndex === results.length - 1) {
               selectedResultIndex = 0;
@@ -122,7 +122,7 @@
               selectedResultIndex += 1;
             }
             break;
-          case 'ArrowUp':
+          case "ArrowUp":
             e.preventDefault();
             if (selectedResultIndex === 0) {
               selectedResultIndex = results.length - 1;
@@ -130,34 +130,34 @@
               selectedResultIndex -= 1;
             }
             break;
-          case 'Escape':
-            if (value === '') {
+          case "Escape":
+            if (value === "") {
               // If the search bar is empty, deactivate the input.
               active = false;
             }
 
             // Reset the search query but keep the search bar active.
             // Do not dispatch "clear" event as that should fire only on the "x" button.
-            value = '';
+            value = "";
             selectedResultIndex = 0;
             break;
         }
-      }}"
+      }}
       on:paste
     />
     <button
       type="button"
       aria-label="Clear search"
-      tabindex="{active ? '0' : '-1'}"
-      class:bx--header__action="{true}"
-      class:bx--header-search-button="{true}"
-      class:bx--header-search-button--hidden="{!active}"
-      on:click="{() => {
+      tabindex={active ? "0" : "-1"}
+      class:bx--header__action={true}
+      class:bx--header-search-button={true}
+      class:bx--header-search-button--hidden={!active}
+      on:click={() => {
         reset();
-        dispatch('clear');
-      }}"
+        dispatch("clear");
+      }}
     >
-      <Close size="{20}" title="Close" />
+      <Close size={20} title="Close" />
     </button>
   </div>
 
@@ -167,7 +167,7 @@
       aria-labelledby="search-label"
       role="menu"
       id="search-menu"
-      class:bx--header-search-menu="{true}"
+      class:bx--header-search-menu={true}
     >
       {#each results as result, i}
         <li role="none">
@@ -175,20 +175,20 @@
             tabindex="-1"
             id="search-menuitem-{i}"
             role="menuitem"
-            href="{result.href}"
-            class:bx--header-search-menu-item="{true}"
-            class:bx--header-search-menu-item--selected="{selectedId ===
-              `search-menuitem-${i}`}"
-            on:click|preventDefault="{async () => {
+            href={result.href}
+            class:bx--header-search-menu-item={true}
+            class:bx--header-search-menu-item--selected={selectedId ===
+              `search-menuitem-${i}`}
+            on:click|preventDefault={async () => {
               selectedResultIndex = i;
               await tick();
               selectResult();
-            }}"
+            }}
           >
-            <slot result="{result}" index="{i}">
+            <slot {result} index={i}>
               {result.text}
               {#if result.description}<span
-                  class:bx--header-search-menu-description="{true}"
+                  class:bx--header-search-menu-description={true}
                   >– {result.description}</span
                 >{/if}
             </slot>
@@ -222,7 +222,8 @@
     height: 3rem;
     background-color: #393939;
     color: #fff;
-    transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
+    transition:
+      max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
 
@@ -272,7 +273,8 @@
     padding: 0;
     flex-shrink: 0;
     opacity: 1;
-    transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
+    transition:
+      background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
 

src/UIShell/HeaderUtilities.svelte

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

src/UIShell/SideNav.svelte

@@ -52,32 +52,32 @@
   });
 </script>
 
-<svelte:window bind:innerWidth="{winWidth}" />
+<svelte:window bind:innerWidth={winWidth} />
 
 {#if !fixed}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    on:click="{() => {
-      dispatch('click:overlay');
+    on:click={() => {
+      dispatch("click:overlay");
       isOpen = false;
-    }}"
-    class:bx--side-nav__overlay="{true}"
-    class:bx--side-nav__overlay-active="{isOpen}"
-    style:z-index="{isOpen ? 6000 : undefined}"
+    }}
+    class:bx--side-nav__overlay={true}
+    class:bx--side-nav__overlay-active={isOpen}
+    style:z-index={isOpen ? 6000 : undefined}
   ></div>
 {/if}
 <nav
-  aria-hidden="{!isOpen}"
-  aria-label="{ariaLabel}"
-  class:bx--side-nav__navigation="{true}"
-  class:bx--side-nav="{true}"
-  class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
+  aria-hidden={!isOpen}
+  aria-label={ariaLabel}
+  class:bx--side-nav__navigation={true}
+  class:bx--side-nav={true}
+  class:bx--side-nav--ux={true}
+  class:bx--side-nav--expanded={rail && winWidth >= expansionBreakpoint
     ? false
-    : isOpen}"
-  class:bx--side-nav--collapsed="{!isOpen && !rail}"
-  class:bx--side-nav--rail="{rail}"
+    : isOpen}
+  class:bx--side-nav--collapsed={!isOpen && !rail}
+  class:bx--side-nav--rail={rail}
   {...$$restProps}
 >
   <slot />

src/UIShell/SideNavDivider.svelte

@@ -1 +1 @@
-<li role="separator" class:bx--side-nav__divider="{true}" {...$$restProps}></li>
+<li role="separator" class:bx--side-nav__divider={true} {...$$restProps}></li>

src/UIShell/SideNavItems.svelte

@@ -1,3 +1,3 @@
-<ul class:bx--side-nav__items="{true}">
+<ul class:bx--side-nav__items={true}>
   <slot />
 </ul>

src/UIShell/SideNavLink.svelte

@@ -24,28 +24,28 @@
   export let ref = null;
 </script>
 
-<li class:bx--side-nav__item="{true}">
+<li class:bx--side-nav__item={true}>
   <a
-    bind:this="{ref}"
-    aria-current="{isSelected ? 'page' : undefined}"
-    href="{href}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    class:bx--side-nav__link="{true}"
-    class:bx--side-nav__link--current="{isSelected}"
+    bind:this={ref}
+    aria-current={isSelected ? "page" : undefined}
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    class:bx--side-nav__link={true}
+    class:bx--side-nav__link--current={isSelected}
     {...$$restProps}
     on:click
   >
     {#if $$slots.icon || icon}
       <div
-        class:bx--side-nav__icon="{true}"
-        class:bx--side-nav__icon--small="{true}"
+        class:bx--side-nav__icon={true}
+        class:bx--side-nav__icon--small={true}
       >
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}
-    <span class:bx--side-nav__link-text="{true}">
+    <span class:bx--side-nav__link-text={true}>
       <slot>
         {text}
       </slot>

src/UIShell/SideNavMenu.svelte

@@ -20,30 +20,30 @@
   import ChevronDown from "../icons/ChevronDown.svelte";
 </script>
 
-<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
+<li class:bx--side-nav__item={true} class:bx--side-nav__item--icon={icon}>
   <button
     type="button"
-    bind:this="{ref}"
-    aria-expanded="{expanded}"
-    class:bx--side-nav__submenu="{true}"
+    bind:this={ref}
+    aria-expanded={expanded}
+    class:bx--side-nav__submenu={true}
     {...$$restProps}
     on:click
-    on:click="{() => {
+    on:click={() => {
       expanded = !expanded;
-    }}"
+    }}
   >
     {#if $$slots.icon || icon}
-      <div class:bx--side-nav__icon="{true}">
+      <div class:bx--side-nav__icon={true}>
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}
-    <span class:bx--side-nav__submenu-title="{true}">{text}</span>
+    <span class:bx--side-nav__submenu-title={true}>{text}</span>
     <div
-      class:bx--side-nav__icon="{true}"
-      class:bx--side-nav__icon--small="{true}"
-      class:bx--side-nav__submenu-chevron="{true}"
+      class:bx--side-nav__icon={true}
+      class:bx--side-nav__icon--small={true}
+      class:bx--side-nav__submenu-chevron={true}
     >
       <ChevronDown />
     </div>
@@ -51,8 +51,8 @@
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
     role="menu"
-    class:bx--side-nav__menu="{true}"
-    style:max-height="{expanded ? "none" : undefined}"
+    class:bx--side-nav__menu={true}
+    style:max-height={expanded ? "none" : undefined}
   >
     <slot />
   </ul>

src/UIShell/SideNavMenuItem.svelte

@@ -18,15 +18,15 @@
   export let ref = null;
 </script>
 
-<li class:bx--side-nav__menu-item="{true}">
+<li class:bx--side-nav__menu-item={true}>
   <a
-    bind:this="{ref}"
-    aria-current="{isSelected ? 'page' : undefined}"
-    href="{href}"
-    class:bx--side-nav__link="{true}"
+    bind:this={ref}
+    aria-current={isSelected ? "page" : undefined}
+    {href}
+    class:bx--side-nav__link={true}
     {...$$restProps}
     on:click
   >
-    <span class:bx--side-nav__link-text="{true}"><slot>{text}</slot></span>
+    <span class:bx--side-nav__link-text={true}><slot>{text}</slot></span>
   </a>
 </li>

src/UIShell/SkipToContent.svelte

@@ -6,12 +6,6 @@
   export let tabindex = "0";
 </script>
 
-<a
-  href="{href}"
-  tabindex="{tabindex}"
-  class:bx--skip-to-content="{true}"
-  {...$$restProps}
-  on:click
->
+<a {href} {tabindex} class:bx--skip-to-content={true} {...$$restProps} on:click>
   <slot>Skip to main content</slot>
 </a>