Remove overflow: hidden from border-radius utility classes

.github/workflows/web_build_and_test.yml

@@ -47,6 +47,10 @@ jobs:
         working-directory: ./renderers/web_core
         run: npm run build
 
+      - name: Run web_core tests
+        working-directory: ./renderers/web_core
+        run: npm test
+
       - name: Install Lit renderer dependencies
         working-directory: ./renderers/lit
         run: npm i

renderers/web_core/package.json

@@ -35,9 +35,16 @@
     "prepack": "npm run build",
     "build": "wireit",
     "build:tsc": "wireit",
-    "copy-spec": "wireit"
+    "copy-spec": "wireit",
+    "test": "wireit"
   },
   "wireit": {
+    "test": {
+      "command": "node --test --enable-source-maps --test-reporter spec dist/src/v0_8/**/*.test.js",
+      "dependencies": [
+        "build"
+      ]
+    },
     "copy-spec": {
       "command": "node scripts/copy-spec.js",
       "files": [

renderers/web_core/src/v0_8/styles/border.test.ts

@@ -0,0 +1,18 @@
+import test from 'node:test';
+import assert from 'node:assert';
+import { border } from './border.js';
+
+test('Border Styles', async (t) => {
+  await t.test('border-radius classes should not apply overflow: hidden to avoid text clipping', () => {
+    // The issue reported clipping of text when using rounded corners because
+    // .border-br-* generated classes also blindly applied overflow: hidden.
+
+    // Check if the generated CSS contains overflow: hidden for border-br classes
+    const match = border.match(/\.border-br-\w+ \{[^}]*overflow:\s*hidden/);
+    assert.strictEqual(match, null, 'Found overflow: hidden applied within a border-br-* class');
+
+    // Check that we DO have the expected border-radius applied
+    const hasBorderRadius = border.match(/\.border-br-1 \{ border-radius: [^;]+; \}/);
+    assert.notStrictEqual(hasBorderRadius, null, 'Missing border-radius in border-br-* class');
+  });
+});

renderers/web_core/src/v0_8/styles/border.ts

@@ -28,7 +28,7 @@ export const border = `
         .border-brw-${idx} { border-right-width: ${idx}px; }
 
         .border-ow-${idx} { outline-width: ${idx}px; }
-        .border-br-${idx} { border-radius: ${idx * grid}px; overflow: hidden;}`;
+        .border-br-${idx} { border-radius: ${idx * grid}px; }`;
     })
     .join("\n")}