fix: align chip rims with updated Penpot design

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.

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.

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`,
   });

apps/playground/src/main.tsx

@@ -705,6 +705,27 @@ function App() {
                   </div>
                 </div>
               </div>
+              <section
+                className="chip-rim-lab"
+                aria-labelledby="chip-rim-heading"
+              >
+                <p className="eyebrow">CHIP BORDERS</p>
+                <h3 id="chip-rim-heading">One continuous edge.</h3>
+                <p className="note">
+                  A thin border follows the whole chip, including every light
+                  insert. Shown at 4× size, without shadows, for a closer look.
+                </p>
+                <div className="chip-rim-previews">
+                  {[1, 100, 250].map((v) => (
+                    <div key={v}>
+                      <Chip value={v} size={256} shadow={false} />
+                      <span>
+                        {v === 250 ? 'Custom · 250' : v} · 4× close-up
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </section>
               <section
                 className="chip-shadow-lab"
                 aria-labelledby="chip-shadow-heading"

apps/playground/src/style.css

@@ -445,15 +445,32 @@ pre {
   flex-wrap: wrap;
   padding: 40px 0;
 }
+.chip-rim-lab,
 .chip-shadow-lab {
   padding: 32px 0;
   border-top: 1px solid var(--line);
 }
+.chip-rim-lab h3,
 .chip-shadow-lab h3 {
   margin: 0;
   font-family: Georgia, serif;
   font-size: 28px;
 }
+.chip-rim-previews {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+  gap: 32px;
+}
+.chip-rim-previews > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+.chip-rim-previews span {
+  font-size: 12px;
+  color: #74806f;
+}
 .chip-shadow-surfaces {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));

docs/api.md

@@ -26,6 +26,8 @@ Inline artwork objects are trusted build-time constants, not a sanitization boun
 
 Contact consists of independent `0 1 blur 1 / 35%` and `0 2 blur 4 / 25%` black shadows at 64 units. Runtime SVG filters use Gaussian deviations of 0.5 and 2, matching Penpot. Both the geometry and shadows scale together. `shadow={false}` disables them; otherwise `style.filter` overrides `--chip-shadow`, which overrides the default. A direct `style.filter` applies to each chip, rather than filtering the combined stack. Custom filter lengths are in the 64-unit chip coordinate system. Use `none` or a CSS filter value such as `drop-shadow(0 2px 3px rgba(0,0,0,.3))`. The previous `CHIP.shadow` Subtle preset is deprecated; `CHIP.contactShadows` contains the current layers.
 
+`CHIP.rim` defines the continuous inner border: width 1, color `#000000`, opacity 0.28 at 64 units. It paints after Edge Inserts and before Inner Ring on every chip, including stack layers. The SVG stroke uses radius 31.5 and width 1 to remain inside the 32-unit outer radius. It scales with the geometry and remains visible when shadows are disabled.
+
 Colours are configurable defaults, not universal casino denominations.
 
 ## Markers