diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 706d1d48..11292ccc 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -17,17 +17,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Install node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
       - name: Install Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: '3.10'
           architecture: 'x64'
 
       - name: Setup pip cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/pip
           key: pip-3.10-${{ hashFiles('package.json') }}
@@ -39,7 +39,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -56,7 +56,9 @@ jobs:
           jlpm run lint:check
           python -m pip install .
 
-          jupyter labextension list 2>&1 | grep -ie "jupyter-ui-demo.*OK"
+          jupyter labextension list 2>&1 | grep -ie "jupyter-ui-demo.*enabled"
+
+          npx playwright install-deps
           python -m jupyterlab.browser_check
 
           pip install build
@@ -65,7 +67,7 @@ jobs:
           pip uninstall -y jupyter_ui_demo jupyterlab
           rm -rf myextension
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: myextension-sdist
           path: myextension.tar.gz
@@ -78,11 +80,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Install Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: '3.10'
           architecture: 'x64'
-      - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v4
         with:
           name: myextension-sdist
       - name: Install and Test
@@ -93,5 +95,5 @@ jobs:
           sudo rm -rf $(which node)
           pip install myextension.tar.gz
           pip install jupyterlab
-          jupyter labextension list 2>&1 | grep -ie "jupyter-ui-demo.*OK"
+          jupyter labextension list 2>&1 | grep -ie "jupyter-ui-demo.*enabled"
           python -m jupyterlab.browser_check --no-browser-test
diff --git a/.github/workflows/check-release.yml b/.github/workflows/check-release.yml
index 0fccebb7..cf67450f 100644
--- a/.github/workflows/check-release.yml
+++ b/.github/workflows/check-release.yml
@@ -27,7 +27,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload Distributions
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: jupyter_ui_demo-releaser-dist-${{ github.run_number }}
           path: .jupyter_releaser_checkout/dist
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index bd5604d9..d90f0bb9 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,15 +19,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node 💾
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -50,15 +50,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node 💾
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -83,15 +83,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node 💾
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -113,15 +113,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node 💾
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
diff --git a/.github/workflows/docs-cd.yml b/.github/workflows/docs-cd.yml
index 2be26b89..bfb02212 100644
--- a/.github/workflows/docs-cd.yml
+++ b/.github/workflows/docs-cd.yml
@@ -33,7 +33,7 @@ jobs:
         working-directory: packages/components
 
       - name: Setup Pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v5
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
diff --git a/.github/workflows/visual-test.yml b/.github/workflows/visual-test.yml
index f36f2f47..25c049db 100644
--- a/.github/workflows/visual-test.yml
+++ b/.github/workflows/visual-test.yml
@@ -24,14 +24,14 @@ jobs:
       - name: Setup Node 💾
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
 
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -45,7 +45,7 @@ jobs:
         run: yarn install
 
       - name: Set up browser cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ${{ github.workspace }}/pw-browsers
@@ -66,7 +66,7 @@ jobs:
           yarn run test:visual -u
         working-directory: packages/components
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: ${{ failure() }}
         with:
           name: jupyter-ui-test
diff --git a/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-chromium-linux.png b/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-chromium-linux.png
index 1259cae2..c142cb32 100644
Binary files a/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-chromium-linux.png and b/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-chromium-linux.png differ
diff --git a/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-firefox-linux.png b/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-firefox-linux.png
index 924900c6..d29fedde 100644
Binary files a/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-firefox-linux.png and b/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-firefox-linux.png differ
diff --git a/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-webkit-linux.png b/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-webkit-linux.png
index f89171d6..02b30be0 100644
Binary files a/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-webkit-linux.png and b/packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-webkit-linux.png differ
diff --git a/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-chromium-linux.png b/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-chromium-linux.png
index 88330bc9..943d2799 100644
Binary files a/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-chromium-linux.png and b/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-chromium-linux.png differ
diff --git a/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-firefox-linux.png b/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-firefox-linux.png
index b71c4642..17f266c2 100644
Binary files a/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-firefox-linux.png and b/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-firefox-linux.png differ
diff --git a/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-webkit-linux.png b/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-webkit-linux.png
index 869d6843..9db781fa 100644
Binary files a/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-webkit-linux.png and b/packages/components/src/search/search.test.ts-snapshots/search-with-maxlength-webkit-linux.png differ
diff --git a/packages/components/src/styles/patterns/field.ts b/packages/components/src/styles/patterns/field.ts
index b6c52711..e9533ada 100644
--- a/packages/components/src/styles/patterns/field.ts
+++ b/packages/components/src/styles/patterns/field.ts
@@ -41,6 +41,8 @@ export const BaseFieldStyles = css`
     font-family: ${bodyFont};
     outline: none;
     user-select: none;
+    /* Ensure to display focus highlight */
+    margin: calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);
   }
 
   .root {
@@ -75,6 +77,10 @@ export const BaseFieldStyles = css`
     line-height: ${typeRampBaseLineHeight};
   }
 
+  .control:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+
   .control:hover,
   .control:${focusVisible},
   .control:disabled,
diff --git a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-chromium-linux.png b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-chromium-linux.png
index d2a70903..40caea77 100644
Binary files a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-chromium-linux.png and b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-chromium-linux.png differ
diff --git a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-firefox-linux.png b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-firefox-linux.png
index 478085b1..bc66ae3a 100644
Binary files a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-firefox-linux.png and b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-firefox-linux.png differ
diff --git a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-webkit-linux.png b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-webkit-linux.png
index 03cc6fbf..51ffe05d 100644
Binary files a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-webkit-linux.png and b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-max-length-webkit-linux.png differ
diff --git a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-chromium-linux.png b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-chromium-linux.png
index 39ced34d..8caeb911 100644
Binary files a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-chromium-linux.png and b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-chromium-linux.png differ
diff --git a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-firefox-linux.png b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-firefox-linux.png
index 06c57780..0d45e00e 100644
Binary files a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-firefox-linux.png and b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-firefox-linux.png differ
diff --git a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-webkit-linux.png b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-webkit-linux.png
index c8a80308..436fc295 100644
Binary files a/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-webkit-linux.png and b/packages/components/src/text-field/text-field.test.ts-snapshots/text-field-with-type-webkit-linux.png differ
diff --git a/packages/lab-example/package.json b/packages/lab-example/package.json
index a6a6818f..7fc71905 100644
--- a/packages/lab-example/package.json
+++ b/packages/lab-example/package.json
@@ -80,14 +80,6 @@
   "styleModule": "style/index.js",
   "jupyterlab": {
     "extension": true,
-    "outputDir": "../../jupyter_ui_demo/labextension",
-    "sharedPackages": {
-      "@jupyter/react-components": {
-        "singleton": true
-      },
-      "@jupyter/web-components": {
-        "singleton": true
-      }
-    }
+    "outputDir": "../../jupyter_ui_demo/labextension"
   }
 }