diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac2d724..d72c9d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
# Changelog
+## 0.2.2 — 2026-10-15
+
+- Align the separate chip rim with the updated Penpot master: a continuous 1px inner border above every edge insert, using shared design constants on single chips and stack layers.
+- Add magnified chip-border previews and document the rim's sizing and paint order.
+- Verify that the rim remains visible over all eight inserts across every denomination and custom chips.
+
## 0.2.1 — 2026-10-15
- Add the approved two-layer Contact shadow to single chips and each visible chip in a stack, enabled by default and scaled with the chip geometry.
diff --git a/README.md b/README.md
index 21d377e..4f8215a 100644
--- a/README.md
+++ b/README.md
@@ -110,6 +110,10 @@ Shadow lengths scale with numeric `width` or `height` props. Override a single c
For sizing driven entirely by application CSS, use a shadow value suited to that layout. The standard card's inner panel and the back's decorative frame retain their design strokes. The retired `--card-border` token no longer controls the outer edge.
+## Chip borders
+
+Every chip has a continuous black inner border at 28% opacity, painted above all eight edge inserts. The border is 1px at the 64px design size and scales with the chip geometry. It applies to all denominations, custom chips and every visible stack layer, including when shadows are disabled.
+
## Chip shadows
`Chip` and `ChipStack` use the Contact shadow by default. At the 64px design size, it combines two independent black layers: offset `0 1`, blur `1`, opacity `35%`; and offset `0 2`, blur `4`, opacity `25%`. The shadow follows the circular artwork and scales with the chip geometry. Each visible chip in a stack gets its own shadow, so overlapping layers remain distinct.
diff --git a/apps/playground/e2e/chip-shadows.spec.ts b/apps/playground/e2e/chip-shadows.spec.ts
index 2759882..b2f3fd1 100644
--- a/apps/playground/e2e/chip-shadows.spec.ts
+++ b/apps/playground/e2e/chip-shadows.spec.ts
@@ -68,6 +68,9 @@ test('Contact shadows render outside chips, separate stack layers and support ov
),
).toBe(true);
await page.getByLabel('Chip shadow', { exact: true }).selectOption('design');
+ await page.locator('.chip-rim-lab').screenshot({
+ path: `test-results/chip-rims-${testInfo.project.name}.png`,
+ });
await page.locator('.chip-shadow-lab').screenshot({
path: `test-results/chip-shadows-${testInfo.project.name}.png`,
});
@@ -81,6 +84,9 @@ test('Contact shadows render outside chips, separate stack layers and support ov
page.locator('.chip-stage > svg').nth(1).locator('[data-chip-face],filter'),
).toHaveCount(0);
await page.setViewportSize({ width: 390, height: 844 });
+ await page.locator('.chip-rim-lab').screenshot({
+ path: `test-results/chip-rims-mobile-${testInfo.project.name}.png`,
+ });
await page.locator('.chip-shadow-lab').screenshot({
path: `test-results/chip-shadows-mobile-${testInfo.project.name}.png`,
});
diff --git a/apps/playground/src/main.tsx b/apps/playground/src/main.tsx
index 9ea5df5..8f044af 100644
--- a/apps/playground/src/main.tsx
+++ b/apps/playground/src/main.tsx
@@ -705,6 +705,27 @@ function App() {
+
+
CHIP BORDERS
+
One continuous edge.
+
+ A thin border follows the whole chip, including every light
+ insert. Shown at 4× size, without shadows, for a closer look.
+