[pull] main from nodejs:main

apps/site/components/Common/Searchbox/Footer/index.module.css

@@ -51,3 +51,11 @@
     @apply size-4;
   }
 }
+
+.poweredByWrapper {
+  @apply ml-0
+    flex
+    items-center
+    justify-end
+    lg:ml-8;
+}

apps/site/components/Common/Searchbox/Footer/index.tsx

@@ -46,7 +46,7 @@ export const Footer = () => {
           </span>
         </div>
       </div>
-      <div>
+      <div className={styles.poweredByWrapper}>
         <a
           href="https://www.orama.com/?utm_source=nodejs.org&utm_medium=powered-by"
           target="_blank"

apps/site/pages/en/learn/asynchronous-work/understanding-processnexttick.md

@@ -9,7 +9,7 @@ authors: flaviocopes, MylesBorins, LaRuaNa, ahmadawais, ovflowd, marksist300
 As you try to understand the Node.js event loop, one important part of it is `process.nextTick()`.
 Every time the runtime calls back into JavaScript for an event, we call it a tick.
 
-When we pass a function to `process.nextTick()`, we instruct the engine to invoke this function immediately after the current operation completes, before moving to the next phase in the event loop:
+When we pass a function to `process.nextTick()`, we schedule it to run immediately after the current call stack completes, before the event loop continues and before any other queued tasks or phases are processed:
 
 ```js
 process.nextTick(() => {

packages/ui-components/src/Common/CodeTabs/index.stories.tsx

@@ -61,6 +61,15 @@ const TabsContent: FC = () => (
 
 export const Default: Story = {};
 
+export const WithExtension: Story = {
+  args: {
+    tabs: [
+      { key: 'mjs', label: 'Example', extension: 'MJS' },
+      { key: 'cjs', label: 'Example', extension: 'CJS' },
+    ],
+  },
+};
+
 export default {
   component: CodeTabs,
   args: {

packages/ui-components/src/Common/Tabs/index.module.css

@@ -22,6 +22,18 @@
         text-neutral-800
         dark:text-neutral-200;
 
+      .tabExtension {
+        @apply ml-1
+          rounded-xs
+          border
+          border-neutral-200
+          px-1
+          py-0.5
+          text-xs
+          font-normal
+          text-neutral-200;
+      }
+
       .tabSecondaryLabel {
         @apply pl-1
           text-neutral-500
@@ -34,6 +46,11 @@
           dark:border-b-green-400
           dark:text-green-400;
 
+        .tabExtension {
+          @apply border-green-400
+            text-green-400;
+        }
+
         .tabSecondaryLabel {
           @apply text-green-800
             dark:text-green-600;

packages/ui-components/src/Common/Tabs/index.tsx

@@ -10,6 +10,7 @@ type Tab = {
   label: string;
   secondaryLabel?: string;
   value?: string;
+  extension?: string;
 };
 
 type TabsProps = TabsPrimitive.TabsProps & {
@@ -37,6 +38,9 @@ const Tabs: FC<PropsWithChildren<TabsProps>> = ({
           className={classNames(styles.tabsTrigger, triggerClassName)}
         >
           {tab.label}
+          {tab.extension && (
+            <span className={styles.tabExtension}>{tab.extension}</span>
+          )}
           {tab.secondaryLabel ? (
             <span className={styles.tabSecondaryLabel}>
               {tab.secondaryLabel}